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

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

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

安装

• Vuex

npm i vuex -S

• Pinia

npm i pinia -S

挂载

Vuex

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

新建vuexStore/index.js

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

main.js引入

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

App.vue测试

 import { useStore } from 'vuex' let vuexStore = useStore() console.log(vuexStore.state.vuexmsg); //hello vuex " _ue_custom_node_="true">

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

Pinia

• main.js引入

import { createApp } from "vue"; import App from "./App.vue"; import {createPinia} from 'pinia' const pinia = createPinia() createApp(App).use(pinia).mount("#app");

• 创建Store

src下新建piniaStore/storeA.js

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

• App.vue使用

 import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() console.log(piniaStoreA.piniaMsg); //hello pinia " _ue_custom_node_="true">

从这里我们可以看出pinia中没有了mutations和modules，pinia不必以嵌套（通过modules引入）的方式引入模块，因为它的每个store便是一个模块，如storeA，storeB... 。 在我们使用Vuex的时候每次修改state的值都需要调用mutations里的修改函数（下面会说到），因为Vuex需要追踪数据的变化，这使我们写起来比较繁琐。而pinia则不再需要mutations，同步异步都可在actions进行操作，至于它没有了mutations具体是如何最终到state变化的，这里我们不过多深究,大概好像应该是通过hooks回调的形式解决的把（我也没研究过，瞎猜的。

修改状态

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

vuex

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

 { {vuexStore.state.vuexmsg}}import { useStore } from 'vuex' let vuexStore = useStore() vuexStore.state.vuexmsg = 'hello juejin' console.log(vuexStore.state.vuexmsg) " _ue_custom_node_="true">

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

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

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

 { { vuexStore.state.vuexmsg }}import { useStore } from 'vuex' let vuexStore = useStore() vuexStore.commit('setVuexMsg', 'hello juejin') console.log(vuexStore.state.vuexmsg) //hello juejin " _ue_custom_node_="true">

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

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

组件中使用dispatch进行分发actions

 { { vuexStore.state.vuexmsg }}import { useStore } from 'vuex' let vuexStore = useStore() vuexStore.dispatch('getState') " _ue_custom_node_="true">

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

Pinia

• 直接修改

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

 { { piniaStoreA.piniaMsg }}import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() console.log(piniaStoreA.piniaMsg); //hello pinia piniaStoreA.piniaMsg = 'hello juejin' console.log(piniaStoreA.piniaMsg); //hello juejin " _ue_custom_node_="true">

• $patch

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

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

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

import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() console.log(piniaStoreA.name); //xiaoyue piniaStoreA.$patch({  piniaMsg: 'hello juejin',  name: 'daming' }) console.log(piniaStoreA.name);//daming

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

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

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

import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() cartStore.$patch((state) => {  state.name = 'daming'  state.piniaMsg = 'hello juejin' })

• 在actions中进行修改

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

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

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

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

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

• 重置state

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

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