pinia vuex升级版 vue3 专用状态管理

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起，最初的原则仍然相同，但 Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。除了安装和 SSR 之外，两者的 API 都是相同的，并且这些文档针对 Vue 3，并在必要时提供有关 Vue 2 的注释，以便 Vue 2 和 Vue 3 用户可以阅读

vuex有啥问题

vuex集中式管理状态
流程复杂
- state（放数据） —》 mutation（同步修改数据） —》 action（操作异步，调用mutation）
- 建议： mutation 和 action可以合并在一起
模块机制
- 数据结构（属性）
- 每个模块下的mutation和action都是挂载到跟模块，为了区分各个模块mutaion，分配了一个命名空间
- 上诉步骤确实区分开各个模块的mutaion/action。。。代码访问的时候就复杂了。
  - 例子：我要调用模块seller下的一个M_name
    1
    this.$store.commit('seller/M_name')
  - 例子：我要调用模块seller下的模块test下的M_name
    1
    this.$store.commit('seller/test/M_name')
  - 例子，我要访问seller下的name
    1
    this.$store.state.seller.name

为什么要使用 Pinia？#

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

dev-tools 支持
- 跟踪动作、突变的时间线
- Store 出现在使用它们的组件中
- time travel 和更容易的调试
热模块更换
- 在不重新加载页面的情况下修改您的 Store
- 在开发时保持任何现有状态
插件：使用插件扩展 Pinia 功能
为 JS 用户提供适当的 TypeScript 支持或 autocompletion
服务器端渲染支持
没有mutations,只有action（写同步，也可以写异步）
不需要modules，多个仓库，你可以理解为一个仓库就是一个模块
不需要命名空间
dev-tools变得友好
编码风格
- vuex的编码风格：配置型的
- pinia支持配置型api也支持组合式api【推荐】

安装pinia

1
2
3

yarn add pinia
# 或者使用 npm
npm install pinia

使用

全局main.js 配置pinia

const app = createApp(App)

#引入&使用pinia
import {createPinia} from 'pinia'
app.use(createPinia())

app.mount('#app')

语法1 store/numStore.js

/* num pinia模块 */
import {defineStore} from 'pinia'

export const useNumstore = defineStore('numstore', {
  //state数据
  state: () => {
    return {
      num: 10,
    }
  },
  //getters
  getters: {
    doubleNum(state) {
      return state.num * 2
    },
  },
  //actions
  actions: {
    //增加
    increase() {
      this.num++
    },
    //减少
    decrease() {
      this.num--
    },
  },
})

语法2 hooks语法

/* num pinia模块 */
import {defineStore} from 'pinia'
import {ref,computed} from 'vue'
export const useNumstore = defineStore('numstore', ()=>{
    const num = ref(10)
    const doubleNum = computed(()=>num.value * 2)
    const increase = ()=>{
        num.value++
    }
    const decrease = ()=>{
         num.value--
    }
    return {
        num,
        doubleNum,
        increase,
        increase
    }
})

使用

<template>
  <div>
    <h3>子组件</h3>
    <p>数据num:{{ num }}</p>
    <button @click="increase">+</button>
    <button @click="decrease">-</button>
  </div>
</template>

<script setup>
#导出解构响应式函数
import {storeToRefs, computed} from 'pinia'
#引入仓库
import {useNumstore} from '../../store/modules/numStore'
#创建一个hooks 仓库实例
const $numStore = useNumstore()
#函数直接解构
const {increase, decrease} = $numStore
#数据需要响应式解构
const {num} = storeToRefs($numStore)

#获取响应式数据方法2 简单
const num  = computed(()=>$numStore.num)
</script>