一文解析Pinia和Vuex，带你全面理解这两个Vue状态管理模式

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北&＃xff0c;关注公众号

回复1&＃xff0c;加入高级Node交流群

Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5&＃xff0c;只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。

本文将通过Vue3的形式对两者的不同实现方式进行对比&＃xff0c;让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。

既然我们要对比两者的实现方式&＃xff0c;那么我们肯定要先在我们的Vue3项目中引入这两个状态管理器&＃xff08;实际项目中千万不要即用Vuex又用Pinia&＃xff0c;不然你会被同事请去喝茶的。下面就让我们看下它们的使用方式吧

安装

• Vuex

npm i vuex -S

• Pinia

npm i pinia -S

挂载

Vuex

在src目录下新建vuexStore,实际项目中你只需要建一个store目录即可&＃xff0c;由于我们需要两种状态管理器&＃xff0c;所以需要将其分开并创建两个store目录

新建vuexStore/index.js

import { createStore } from &＃39;vuex&＃39;export default createStore({//全局state&＃xff0c;类似于vue种的datastate() {return {vuexmsg: "hello vuex",name: "xiaoyue",};},//修改state函数mutations: {},//提交的mutation可以包含任意异步操作actions: {},//类似于vue中的计算属性getters: {},//将store分割成模块&＃xff08;module&＃xff09;,应用较大时使用modules: {}
})

main.js引入

import { createApp } from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import store from &＃39;&＃64;/vuexStore&＃39;
createApp(App).use(store).mount(&＃39;#app&＃39;)

App.vue测试

页面正常打印hello vuex说明我们的Vuex已经挂载成功了

Pinia

• main.js引入

import { createApp } from "vue";
import App from "./App.vue";
import {createPinia} from &＃39;pinia&＃39;
const pinia &＃61; createPinia()
createApp(App).use(pinia).mount("#app");

• 创建Store

src下新建piniaStore/storeA.js

import { defineStore } from "pinia";export const storeA &＃61; defineStore("storeA", {state: () &＃61;> {return {piniaMsg: "hello pinia",};},getters: {},actions: {},
});

• App.vue使用

从这里我们可以看出pinia中没有了mutations和modules&＃xff0c;pinia不必以嵌套&＃xff08;通过modules引入&＃xff09;的方式引入模块&＃xff0c;因为它的每个store便是一个模块&＃xff0c;如storeA&＃xff0c;storeB... 。

在我们使用Vuex的时候每次修改state的值都需要调用mutations里的修改函数&＃xff08;下面会说到&＃xff09;&＃xff0c;因为Vuex需要追踪数据的变化&＃xff0c;这使我们写起来比较繁琐。而pinia则不再需要mutations&＃xff0c;同步异步都可在actions进行操作&＃xff0c;至于它没有了mutations具体是如何最终到state变化的&＃xff0c;这里我们不过多深究,大概好像应该是通过hooks回调的形式解决的把&＃xff08;我也没研究过&＃xff0c;瞎猜的。

修改状态

获取state的值从上面我们已经可以一目了然的看到了&＃xff0c;下面让我们看看他俩修改state的方法吧

vuex

vuex在组件中直接修改state&＃xff0c;如App.vue

可以看出我们是可以直接在组件中修改state的而且还是响应式的&＃xff0c;但是如果这样做了&＃xff0c;vuex不能够记录每一次state的变化记录&＃xff0c;影响我们的调试。

当vuex开启严格模式的时候&＃xff0c;直接修改state会抛出错误&＃xff0c;所以官方建议我们开启严格模式&＃xff0c;所有的state变更都在vuex内部进行&＃xff0c;在mutations进行修改。例如vuexStore/index.js:

import { createStore } from "vuex";export default createStore({strict: true,//全局state&＃xff0c;类似于vue种的datastate: {vuexmsg: "hello vuex",},//修改state函数mutations: {setVuexMsg(state, data) {state.vuexmsg &＃61; data;},},//提交的mutation可以包含任意异步操作actions: {},//类似于vue中的计算属性getters: {},//将store分割成模块&＃xff08;module&＃xff09;,应用较大时使用modules: {},
});

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

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

import { createStore } from "vuex";
export default createStore({strict: true,//全局state&＃xff0c;类似于vue种的datastate() {return {vuexmsg: "hello vuex",}},//修改state函数mutations: {setVuexMsg(state, data) {state.vuexmsg &＃61; data;},},//提交的mutation可以包含任意异步操作actions: {async getState({ commit }) {//const result &＃61; await xxxx 假设这里进行了请求并拿到了返回值commit("setVuexMsg", "hello juejin");},}
});

组件中使用dispatch进行分发actions

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

Pinia

• 直接修改

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

• $patch

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

import { defineStore } from "pinia";export const storeA &＃61; defineStore("storeA", {state: () &＃61;> {return {piniaMsg: "hello pinia",name: "xiaoyue",};},getters: {},actions: {},
});

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

import { storeA } from &＃39;&＃64;/piniaStore/storeA&＃39;
let piniaStoreA &＃61; storeA()
console.log(piniaStoreA.name); //xiaoyue
piniaStoreA.$patch({piniaMsg: &＃39;hello juejin&＃39;,name: &＃39;daming&＃39;
})
console.log(piniaStoreA.name);//daming

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

piniaStoreA.$patch({name: &＃39;daming&＃39;
})

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

import { storeA } from &＃39;&＃64;/piniaStore/storeA&＃39;
let piniaStoreA &＃61; storeA()
cartStore.$patch((state) &＃61;> {state.name &＃61; &＃39;daming&＃39;state.piniaMsg &＃61; &＃39;hello juejin&＃39;
})

• 在actions中进行修改

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

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

import { defineStore } from "pinia";
export const storeA &＃61; defineStore("storeA", {state: () &＃61;> {return {piniaMsg: "hello pinia",name: "xiao yue",};},actions: {setName(data) {this.name &＃61; data;},},
});

组件App.vue中调用不需要再使用dispatch函数&＃xff0c;直接调用store的方法即可

import { storeA } from &＃39;&＃64;/piniaStore/storeA&＃39;
let piniaStoreA &＃61; storeA()
piniaStoreA.setName(&＃39;daming&＃39;)

• 重置state

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

import { storeA } from &＃39;&＃64;/piniaStore/storeA&＃39; 
let piniaStoreA &＃61; storeA()
piniaStoreA.$reset()

Pinia解构(storeToRefs)

当我们组件中需要用到state中多个参数时&＃xff0c;使用解构的方式取值往往是很方便的&＃xff0c;但是传统的ES6解构会使state失去响应式&＃xff0c;比如组件App.vue,我们先解构取得name值&＃xff0c;然后再去改变name值&＃xff0c;然后看页面是否变化

浏览器展示如下

我们可以发现浏览器并没有更新页面为daming

为了解决这个问题&＃xff0c;Pinia提供了一个结构方法storeToRefs&＃xff0c;我们将组件App.vue使用storeToRefs解构

再看下页面变化

我们发现页面已经被更新成daming了

getters

其实Vuex中的getters和Pinia中的getters用法是一致的&＃xff0c;用于自动监听对应state的变化&＃xff0c;从而动态计算返回值(和vue中的计算属性差不多),并且getters的值也具有缓存特性

Pinia

我们先将piniaStore/storeA.js改为

import { defineStore } from "pinia";export const storeA &＃61; defineStore("storeA", {state: () &＃61;> {return {count1: 1,count2: 2,};},getters: {sum() {console.log(&＃39;我被调用了!&＃39;)return this.count1 &＃43; this.count2;},},
});

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

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

import { storeA } from &＃39;&＃64;/piniaStore/storeA&＃39;
let piniaStoreA &＃61; storeA()
console.log(piniaStoreA.sum)
console.log(piniaStoreA.sum)
console.log(piniaStoreA.sum)
piniaStoreA.count1 &＃61; 2
console.log(piniaStoreA.sum)

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

Vuex

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

import { createStore } from "vuex";export default createStore({strict: true,//全局state&＃xff0c;类似于vue种的datastate: {count1: 1,count2: 2,},//类似于vue中的计算属性getters: {sum(state){return state.count1 &＃43; state.count2}}});

modules

如果项目比较大&＃xff0c;使用单一状态库&＃xff0c;项目的状态库就会集中到一个大对象上&＃xff0c;显得十分臃肿难以维护。所以Vuex就允许我们将其分割成模块&＃xff08;modules&＃xff09;&＃xff0c;每个模块都拥有自己state&＃xff0c;mutations,actions...。而Pinia每个状态库本身就是一个模块。

Pinia

Pinia没有modules&＃xff0c;如果想使用多个store&＃xff0c;直接定义多个store传入不同的id即可&＃xff0c;如&＃xff1a;

import { defineStore } from "pinia";export const storeA &＃61; defineStore("storeA", {...});
export const storeB &＃61; defineStore("storeB", {...});
export const storeC &＃61; defineStore("storeB", {...});

Vuex

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

import { createStore } from "vuex";
const moduleA &＃61; {state: () &＃61;> ({ count:1}),mutations: {setCount(state, data) {state.count &＃61; data;},},actions: {getuser() {//do something},},getters: { ... }
}const moduleB &＃61; {state: () &＃61;> ({ ... }),mutations: { ... },actions: { ... }
}export default createStore({strict: true,//全局state&＃xff0c;类似于vue种的datastate() {return {vuexmsg: "hello vuex",name: "xiaoyue",};},modules: {moduleA,moduleB},
});

使用moduleA

import { useStore } from &＃39;vuex&＃39;
let vuexStore &＃61; useStore()
console.log(vuexStore.state.moduleA.count) //1
vuexStore.commit(&＃39;setCount&＃39;, 2)
console.log(vuexStore.state.moduleA.count) //2
vuexStore.dispatch(&＃39;getuser&＃39;)

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

const moduleA &＃61; {namespaced: true,state: () &＃61;> ({count: 1,}),mutations: {setCount(state, data) {state.count &＃61; data;},},actions: {getuser() {//do something},},
}

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

vuexStore.commit(&＃39;moduleA/setCount&＃39;, 2)
vuexStore.dispatch(&＃39;moduleA/getuser&＃39;)

作者&＃xff1a;东方小月

https://juejin.cn/post/7121209657678364685

Node 社群

我组建了一个氛围特别好的 Node.js 社群&＃xff0c;里面有很多 Node.js小伙伴&＃xff0c;如果你对Node.js学习感兴趣的话&＃xff08;后续有计划也可以&＃xff09;&＃xff0c;我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波&＃x1f44d;