vue3中vuex与pinia

前言：

        vue中状态管理库是vuex，在vue3出来以后，vuex的团队核心成员在修改部分功能后，开发除了一款轻量级的 pinia，在这里聊聊他们的区别和优缺点。

1、安装

vuex

npm install vuex@next --save

pinia

npm install pinia@next

2、用法

vuex在vue3中的写法和用法

// store.js
import { createStore } from 'vuex'
 
export default createStore({
    // 定义数据
    state: { a:1 },
    // 定义方法
    mutations: {
        xxx(state,number){
            state.a = number
        }
    },
    // 异步方法
    actions: { },
    // 获取数据
    getters: { getA:state=>return state.a }
})
 
// 在vue3中使用
<template>
    <div>
        {{number}}
        <button @click="clickHandle">按钮</button>
    </div>
</template>
<script>
import {useStore} from "vuex"
export default {
    setup(){
        let store = useStore()
        // ⭐⭐⭐ 如果直接取state的值必须使用computed才能实现数据的响应式如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed
        let number = computed(()=>store.state.a)
        const clickHandle = () => {
            store.commit("xxx","100")
        }
        return{number,clickHandle}
    }
}
<script>

pinia在vue3中的写法和用法

// store.js
import { defineStore } from 'pinia'
 
// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({
  // id: 必须的，在所有 Store 中唯一
  id: "myGlobalState",
  // state: 返回对象的函数
  state: () => ({
    a: 1,
  }),
  getters: {},
  actions: {
    setXXX(number) {
      this.a = number;
    },
  },
});
 
// 在vue3中使用
<template>
    <div>
        {{number}}
        <button @click="clickHandle">按钮</button>
    </div>
</template>
<script>
import {GlobalStore} from "@/store/store.js"
export default {
    setup(){
        let store = GlobalStore();
        // ⭐⭐⭐ 如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed (这边和vuex是一样的)
        let number = computed(()=>store.a)
        const clickHandle = () => {
            store.setXXX("100")
        }
        return{number,clickHandle}
    }
}
<script>

3、Vuex 和 Pinia 的优缺点

Vuex的优点

• 支持调试功能，如时间旅行和编辑
• 适用于大型、高复杂度的Vue.js项目

Vuex的缺点

• 从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
• Vuex 4有一些与类型安全相关的问题

Pinia的优点

• 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
• 极其轻巧(体积约 1KB)
• store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
• 支持多个Store
• 支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点

• 不支持时间旅行和编辑等调试功能

4、个人总结

Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目

Vuex 适用于大规模、高复杂度的 Vue.js 项目。