Pinia和vuex 的区别

Pinia和Vuex一样都是是vue的全局状态管理器。

安装

Vuex npm i vuex -S
Pinia npm i pinia -S
Vuex 实例

import { createStore } from 'vuex'
export default createStore({
    //全局state，类似于vue种的data
    state() {
      return {
        vuexmsg: "hello vuex",
        name: "xue",
      };
    },
    //修改state函数
    mutations: {
      setVuexMsg(state, data) {
        state.vuexmsg = data;
      },
    },
    //提交的mutation可以包含任意异步操作
    actions: {
      async getState({ commit }) {
        //const result = await xxxx 假设这里进行了请求并拿到了返回值
        commit("setVuexMsg", "hello juejin");
      },
    },
    //类似于vue中的计算属性
    getters: {},
    //将store分割成模块（module）,应用较大时使用
    modules: {}
})

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

 // 修改state
vuexStore.commit('setVuexMsg', 'hello juejin')
console.log(vuexStore.state.vuexmsg) //hello juejin

// 组件中使用dispatch进行分发actions
vuexStore.dispatch('getState')
</script>

Pinia实例

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

<template>
  <div></div>
</template>
<script setup>
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()
console.log(piniaStoreA.piniaMsg); //hello pinia
// 修改state
piniaStoreA.piniaMsg = 'hello juejin'
console.log(piniaStoreA.piniaMsg); //hello juejin
// 使用$patch方法可以修改多个state中的值
piniaStoreA.$patch({
  piniaMsg: 'hello juejin',
  name: 'daming'
})
console.log(piniaStoreA.name);//daming
// $patch还可以使用函数的方式进行修改状态
piniaStoreA.$patch((state) => {
  state.name = 'daming'
  state.piniaMsg = 'hello juejin'
})

// 重置state，可以使用$reset将状态重置为初始值
piniaStoreA.$reset()

// Pinia解构(storeToRefs)，vuex中 传统的ES6解构会使state失去响应式，pinia中就可以
import { storeToRefs } from 'pinia'
let { piniaMsg, name } = storeToRefs(piniaStoreA)
piniaStoreA.$patch({
  name: 'daming'
})

</script>

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

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

不同于Vuex的是，Pinia是去掉了mutations，所以在actions中修改state就和Vuex在mutations修改state一样。这样可以实现整个数据流程都在状态管理器内部，便于管理。

getters
其实Vuex中的getters和Pinia中的getters用法是一致的，用于自动监听对应state的变化，从而动态计算返回值(和vue中的计算属性差不多),并且getters的值也具有缓存特性。只有在首次使用用或者当我们改变sum所依赖的值的时候，getters中的sum才会被调用。
modules
如果项目比较大，使用单一状态库，项目的状态库就会集中到一个大对象上，显得十分臃肿难以维护。所以Vuex就允许我们将其分割成模块（modules），每个模块都拥有自己state，mutations,actions...。而Pinia每个状态库本身就是一个模块。

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

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

参考 Pinia和Vuex对比