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测试

页面正常打印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使用

从这里我们可以看出pinia中没有了mutations和modules，蓝狮注册登陆pinia不必以嵌套（通过modules引入）的方式引入模块，因为它的每个store便是一个模块，如storeA，storeB… 。

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

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

vuex