Vuex 和 Pinia 两个状态管理模式的区别-编程知识

Vuex 和 Pinia 两个状态管理模式的区别

Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。（实际项目中千万不要即用Vuex又用Pinia，不然你会被同事‘’请去喝茶的‘’。

一、安装（常用命令安装）

Vuex

npm i vuex -S

Pinia

npm i pinia -S

二、挂载

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

import { createStore } from 'vuex'export default createStore({//全局state，类似于vue种的datastate() {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测试

<template><div></div>
</template>
<script setup>
import { useStore } from 'vuex'
let vuexStore = useStore()
console.log(vuexStore.state.vuexmsg); //hello vuex
</script>

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

2.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使用

<template><div></div>
</template>
<script setup>
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()
console.log(piniaStoreA.piniaMsg); //hello pinia
</script>

三、修改状态

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

<template><div>{{vuexStore.state.vuexmsg}}</div>
</template>
<script setup>
import { useStore } from 'vuex'
let vuexStore = useStore()
vuexStore.state.vuexmsg = 'hello juejin'
console.log(vuexStore.state.vuexmsg)</script>

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

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

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

<template><div>{{ vuexStore.state.vuexmsg }}</div>
</template>
<script setup>
import { useStore } from 'vuex'
let vuexStore = useStore()
vuexStore.commit('setVuexMsg', 'hello juejin')
console.log(vuexStore.state.vuexmsg) //hello juejin</script>

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

import { createStore } from "vuex";
export default createStore({strict: true,//全局state，类似于vue种的datastate() {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

<template><div>{{ vuexStore.state.vuexmsg }}</div>
</template>
<script setup>
import { useStore } from 'vuex'
let vuexStore = useStore()
vuexStore.dispatch('getState')</script>

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