• 详解Pinia和Vuex

    一、vuex介绍

    1.什么是vuex？为什么要使用vuex?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

    在vue最重要的就是数据驱动和组件化，每个组件都有自己的data,template和methods,data是数据和，我们也叫做状态，通过methods中方法改变状态来更新视图，在单个组件中修改状态更新视图是很方便的，但是实际开发中是多个组件（还有多层组件嵌套）共享同一个状态时，这个时候传参就会很繁琐，我们这里就要引进vuex进行状态管理，负责组件之间的通信，方便维护代码

    思考：组件之间的传值有哪些，有父子通讯，兄弟组件通讯·····但是传参对于多层嵌套就会显得非常繁琐，代码维护也会非常麻烦。因此vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据放进vuex中，任何组件都可以使用

    2.vuex应用核心

    每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

    （1)Vuex的状态存储是响应式的。当Vuex组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到相应更新

    （2)不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation

    二、Pinia介绍

    1.什么是pinia？为什么要使用pinia?

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

    三、安装

    1.vuex

    npm install vuex --save
    yarn add vuex

    2.Pinia

    npm install pinia --save
    npm add pinia

    三、挂载

    1.vuex

    在src目录下新建vuexStore,实际项目中你只需要建一个store目录即可。

    新建vueStore/index.js

    1. import { createStore } from 'vuex'
    2.  
    3. export default createStore({
    4.     //全局state，类似于vue种的data
    5.     state() {
    6.       return {
    7.         vuexmsg: "hello vuex",
    8.         name: "xx",
    9.       };
    10.     },
    11.  
    12.     //修改state函数
    13.     mutations: {
    14.     },
    15.  
    16.     //提交的mutation可以包含任意异步操作
    17.     actions: {
    18.     },
    19.  
    20.     //类似于vue中的计算属性
    21.     getters: {
    22.     },
    23.  
    24.     //将store分割成模块（module）,应用较大时使用
    25.     modules: {
    26.     }
    27. })

    main.js中引入

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import store from '@/vuexStore'
    4. createApp(App).use(store).mount('#app')

    App.vue测试

    1. <template>
    2.   <div>div>
    3. template>
    4. <script setup>
    5.     import { useStore } from 'vuex'
    6.     let vuexStore = useStore()
    7.     console.log(vuexStore.state.vuexmsg); //hello vuex
    9.

    2.Pinia

    main.js中引入

    1. import { createApp } from "vue";
    2. import App from "./App.vue";
    3. import {createPinia} from 'pinia'
    4. const pinia = createPinia()
    5. createApp(App).use(pinia).mount("#app");
    6.

    src下新建piniaStore/store A.js

    1. import {defineStore} from 'pinia';
    2.  
    3. export const storeA = defineStore("storeA", {
    4.   state: () => {
    5.     return {
    6.       piniaMsg: "hello pinia",
    7.     };
    8.   },
    9.   getters: {},
    10.   actions: {},
    11. });
    12.

    App.vue使用

    1. <template>
    2.   <div>div>
    3. template>
    4. <script setup>
    5.   import { storeA } from '@/piniaStore/storeA'
    6.   let piniaStoreA = storeA()
    7.   console.log(piniaStoreA.piniaMsg); //hello pinia
    8. script>

    从这里我们可以看出pinia中没有mutations和modules,pinia不必以嵌套（通过modules引入）的方式引入模块，因为他的每个store便是一个模块，如storeA,storeB····。在我们使用vuex的时候每次修改state的值都需要调用mutations里的修改函数，因为vuex需要追踪数据的变化，这使得我们写起来比较繁琐。而pinia则不再需要mutations,同步异步都可以在actions进行操作。

    四、修改状态

    获取state的值我们已经熟悉了，接下来是如何修改state的值

    1.vuex

    vuex在组件中直接修改为state,如App.vue

    2. <script setup>
    3.    import {useStore} from 'vuex'
    4.    let vuexStore=useStore()
    5.    vuexStore.state.vuexmsg='hello csdn'
    6.    console.log(vueStore.state.vuexmsg)
    7. script>

    可以看出我们是可以直接在组件中修改state的而且还是响应式的，但是如果这样做了，vuex不能够记录每一次state的变化记录，影响我们的调试。当vuex开启严格模式的时候，直接修改state会抛出错误，所以官方建议我们开启严格模式，所有的state变更都在vuex内部进行，在mutations进行修改。例如：

    1. import { createStore } from "vuex";
    2.  
    3. export default createStore({
    4.   strict: true,
    5.   //全局state，类似于vue种的data
    6.   state: {
    7.     vuexmsg: "hello vuex",
    8.   },
    9.  
    10.   //修改state函数
    11.   mutations: {
    12.     setVuexMsg(state, data) {
    13.       state.vuexmsg = data;
    14.     },
    15.   },
    16.  
    17.   //提交的mutation可以包含任意异步操作
    18.   actions: {},
    19.  
    20.   //类似于vue中的计算属性
    21.   getters: {},
    22.  
    23.   //将store分割成模块（module）,应用较大时使用
    24.   modules: {},
    25. });
    26.

    当我们需要修改vuexmsg的时候需要提交setVuexMsg方法，如App.vue

    2. <script setup>
    3. import { useStore } from 'vuex'
    4. let vuexStore = useStore()
    5. vuexStore.commit('setVuexMsg', 'hello juejin')
    6. console.log(vuexStore.state.vuexmsg) //hello juejin
    7.  
    8. script>

    或者我们可以在actions中进行提交mutations修改state

    1. import { createStore } from "vuex";
    2. export default createStore({
    3.   strict: true,
    4.   //全局state，类似于vue种的data
    5.   state() {
    6.     return {
    7.       vuexmsg: "hello vuex",
    8.     }
    9.   },
    10.  
    11.   //修改state函数
    12.   mutations: {
    13.     setVuexMsg(state, data) {
    14.       state.vuexmsg = data;
    15.     },
    16.   },
    17.  
    18.   //提交的mutation可以包含任意异步操作
    19.   actions: {
    20.     async getState({ commit }) {
    21.       //const result = await xxxx 假设这里进行了请求并拿到了返回值
    22.       commit("setVuexMsg", "hello csdn");
    23.     },
    24.   }
    25. });
    26.

    组件中使用dispatch进行分发actions

    1. <template>
    2.   <div>{{ vuexStore.state.vuexmsg }}div>
    3. template>
    4. <script setup>
    5. import { useStore } from 'vuex'
    6. let vuexStore = useStore()
    7. vuexStore.dispatch('getState')
    8.  
    9. script>

    一般来说，vuex中的流程是首先actions一般放异步函数，拿请求后端接口为例，当接口返回值的时候，actions会提交一个mutations中的函数，然后这个函数对vuex中的状态（state)进行一个修改，组件中再渲染这个状态，从而实现整个数据流程都在vuex内部进行便于检测

    2.pinia

    直接修改：相比于Vuex，Pinia是可以直接修改状态的，并且调试工具能够记录到每一次state的变化。如App.vue

    1. <template>
    2.    <div>{{piniaStoreA.piniaMsg}}div>
    3. template>
    4. <script setup>
    5.   import {storeA} from '@/piniaStore/storeA'
    6.   let piniaStoreA=storeA()
    7.   console.log(piniaStoreA.piniaMsg);
    8.   piniaStoreA.piniaMsg='hello csdn'
    9.   console.log(piniaStoreA.piniaMsg);
    10. script>

    $patch

    使用$patch方法可以修改多个state中的值，比如我们在piniaStore/storeA.js中的state增加一个name

    1. import { defineStore } from 'pinia';
    2. export const storeA=defineStore("storeA",{
    3.     state:()=>{
    4.         return {
    5.            piniaMsg:'hello csdn',
    6.            name:'xx',
    7.         };
    8.     },
    9.     getters:{},
    10.     actions:{},
    11. });

    然后我们在App.vue中进行修改这两个state

    1. import { storeA } from '@/piniaStore/storeA'
    2. let piniaStoreA = storeA()
    3. console.log(piniaStoreA.name); //xiaoyue
    4. piniaStoreA.$patch({
    5.   piniaMsg: 'hello juejin',
    6.   name: 'daming'
    7. })
    8. console.log(piniaStoreA.name);//daming
    9.

    当然也是支持修改单个状态的如

    1. piniaStoreA.$patch({
    2.   name: 'daming'
    3. })

    $patch还可以使用函数的方式进行修改状态

    1. import { storeA } from '@/piniaStore/storeA'
    2. let piniaStoreA = storeA()
    3. cartStore.$patch((state) => {
    4.   state.name = 'daming'
    5.   state.piniaMsg = 'hello juejin'
    6. })
    7.

    在actions中进行修改：

    不同于Vuex的是，Pinia去掉了mutations,所以在actions中修改state就行，vuex在mutations修改state一样。其实这也是比较推荐的一种修改状态的方式，就像上面说的，这样可以实现整个数据流程都在状态管理器内部，便于管理

    在piniaStore/storeA.js的actions修改一个修改name的函数

    1. import { defineStore } from "pinia";
    2. export const storeA = defineStore("storeA", {
    3.   state: () => {
    4.     return {
    5.       piniaMsg: "hello pinia",
    6.       name: "xx",
    7.     };
    8.   },
    9.   actions: {
    10.     setName(data) {
    11.       this.name = data;
    12.     },
    13.   },
    14. });

    组件App.vue中调用不需要使用dispatch函数，直接俄调用store的方法即可

    1. import { storeA } from '@/piniaStore/storeA'
    2. let piniaStoreA = storeA()
    3. piniaStoreA.setName('daming')

    重置state

    Pinia可以使用$reset将状态重置为初始值

    1. import { storeA } from '@/piniaStore/storeA' 
    2. let piniaStoreA = storeA()
    3. piniaStoreA.$reset()

    五、Pinia解构（storeToRefs)

    当我们组件中需要用到state中多个参数时，使用解构的方式取值往往是很方便的，但是传统的ES6解构会使state失去响应。为了解决这个问题，Pinia提供了一个结构方法storeToRefs,我们将组件App.vue使用storeToRefs解构

    2. <script setup>
    3. import { storeA } from '@/piniaStore/storeA'
    4. import { storeToRefs } from 'pinia'
    5. let piniaStoreA = storeA()
    6. let { piniaMsg, name } = storeToRefs(piniaStoreA)
    7. piniaStoreA.$patch({
    8.   name: 'daming'
    9.  //此时修改成功
    10. })
    11.  
    12. script>

    六、getters

    其实Vuex中的getters和pinia中的getters用法是一致的，用于自动监听对应state的变化，从而动态计算返回值（和vue中的计算属性差不多），并且getters的值也具有缓存性

    1.vuex

    Vuex中的getters使用和Pinia的使用方式类似，就不再进行过多说明,写法如下vuexStore/index.js

    1. import { createStore } from "vuex";
    2.  
    3. export default createStore({
    4.   strict: true,
    5.   //全局state，类似于vue种的data
    6.   state: {
    7.     count1: 1,
    8.     count2: 2,
    9.   },
    10.  
    11.   //类似于vue中的计算属性
    12.   getters: {
    13.     sum(state){
    14.       return state.count1 + state.count2
    15.     }
    16.   }
    17.  
    18.  
    19. });
    20.

    2.pinia

    我们先将piniaStore/storeA.js改为

    1. import { defineStore } from "pinia";
    2.  
    3. export const storeA = defineStore("storeA", {
    4.   state: () => {
    5.     return {
    6.       count1: 1,
    7.       count2: 2,
    8.     };
    9.   },
    10.   getters: {
    11.     sum() {
    12.       console.log('我被调用了!')
    13.       return this.count1 + this.count2;
    14.     },
    15.   },
    16. });
    17.

    然后在组件App.vue中获取sum

    1. <template>
    2.   <div>{{ piniaStoreA.sum }}div>
    3. template>
    4. <script setup>
    5. import { storeA } from '@/piniaStore/storeA'
    6. let piniaStoreA = storeA()
    7. console.log(piniaStoreA.sum) //3
    8.  
    9. script>

    让我们来看下什么是缓存特性。首先我们在组件多次访问sum再看下控制台打印

    1. import { storeA } from '@/piniaStore/storeA'
    2. let piniaStoreA = storeA()
    3. console.log(piniaStoreA.sum)
    4. console.log(piniaStoreA.sum)
    5. console.log(piniaStoreA.sum)
    6. piniaStoreA.count1 = 2
    7. console.log(piniaStoreA.sum)

    从打印结果我们可以看出只有在首次使用用或者当我们改变sum所依赖的值的时候，getters中的sum才会被调用

    七、modules

    如果项目较大，使用单一状态库，项目的状态库就会集中在一个大对象上，显得难以维护。所以vuex就允许我们将其分割为模块（modules),每个模块都有自己state,mutations,actions····。而pinia每个状态库本身就是一个模块

    1.vuex

    一般来说每个module都会新建一个文件，然后再引入这个总的入口index.js,这里为了方便写在一起

    1. import { createStore } from "vuex";
    2. const moduleA = {
    3.   state: () => ({ 
    4.     count:1
    5.    }),
    6.   mutations: {
    7.     setCount(state, data) {
    8.       state.count = data;
    9.     },
    10.   },
    11.   actions: {
    12.     getuser() {
    13.       //do something
    14.     },
    15.   },
    16.   getters: { ... }
    17. }
    18.  
    19. const moduleB = {
    20.   state: () => ({ ... }),
    21.   mutations: { ... },
    22.   actions: { ... }
    23. }
    24.  
    25. export default createStore({
    26.   strict: true,
    27.   //全局state，类似于vue种的data
    28.   state() {
    29.     return {
    30.       vuexmsg: "hello vuex",
    31.       name: "xiaoyue",
    32.     };
    33.   },
    34.   modules: {
    35.     moduleA,
    36.     moduleB
    37.   },
    38. });
    39.

    使用moduleA

    1. import { useStore } from 'vuex'
    2. let vuexStore = useStore()
    3. console.log(vuexStore.state.moduleA.count) //1
    4. vuexStore.commit('setCount', 2)
    5. console.log(vuexStore.state.moduleA.count) //2
    6. vuexStore.dispatch('getuser')
    7.

    一般我们为了防止提交一些mutation或者actions中的方法重名，modules一般会采用命名空间的方式 namespaced: true 如moduleA：

    1. const moduleA = {
    2.   namespaced: true,
    3.   state: () => ({
    4.     count: 1,
    5.   }),
    6.   mutations: {
    7.     setCount(state, data) {
    8.       state.count = data;
    9.     },
    10.   },
    11.   actions: {
    12.     getuser() {
    13.       //do something
    14.     },
    15.   },
    16. }

    此时如果我们再调用setCount或者getuser

    1. vuexStore.commit('moduleA/setCount', 2)
    2. vuexStore.dispatch('moduleA/getuser')

    2.pinia

    Pinia没有modules，如果想使用多个store，直接定义多个store传入不同的id即可，如：

    1. import { defineStore } from "pinia";
    2.  
    3. export const storeA = defineStore("storeA", {...});
    4. export const storeB = defineStore("storeB", {...});
    5. export const storeC = defineStore("storeB", {...});
    6.

    写在最后                                                                                                                           

    Pinia对vue2.3的兼容性更好，支持TypeScript

    Pinia是vuex的替代版，符合Vue3组合式API，让代码扁平化

    Pinia抛弃传统的mutation,只有state,getter和action，简化状态管理

  • 相关阅读:
    万字血书Vue—路由
    C++容器工作效率-内存操作
    SpringBoot笔记之Swagger
    Win10更新错误代码0x800f081f的解决方法
    read 方法为什么返回 int 类型
    基于微信小程序驾校报名系统（微信小程序毕业设计）
    ADB原理（第四篇：聊聊adb shell ps与adb shell ps有无双引号的区别）
    Linux理解
    集成学习算法
    【数据结构初阶】复杂链表复制+带头双向循环链表+缓存级知识
  • 原文地址：https://blog.csdn.net/m0_61478092/article/details/133842817