Pinia解构(storeToRefs)
当我们组件中需要用到state中多个参数时，使用解构的方式取值往往是很方便的，但是传统的ES6解构会使state失去响应式，比如组件App.vue,我们先解构取得name值，然后再去改变name值，然后看页面是否变化
<template> <div>{{ name }}</div> </template> <script setup> import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() let { piniaMsg, name } = piniaStoreA piniaStoreA.$patch({ name: 'daming' }) </script>
浏览器展示如下
我们可以发现浏览器并没有更新页面为daming
为了解决这个问题，Pinia提供了一个结构方法storeToRefs，我们将组件App.vue使用storeToRefs解构
<template> <div>{{ name }}</div> </template> <script setup> import { storeA } from '@/piniaStore/storeA' import { storeToRefs } from 'pinia' let piniaStoreA = storeA() let { piniaMsg, name } = storeToRefs(piniaStoreA) piniaStoreA.$patch({ name: 'daming' }) </script>
再看下页面变化
我们发现页面已经被更新成daming了
getters
其实Vuex中的getters和Pinia中的getters用法是一致的，用于自动监听对应state的变化，从而动态计算返回值(和vue中的计算属性差不多),并且getters的值也具有缓存特性
Pinia
我们先将piniaStore/storeA.js改为
import { defineStore } from "pinia"; export const storeA = defineStore("storeA", { state: () => { return { count1: 1, count2: 2, }; }, getters: { sum() { console.log('我被调用了!') return this.count1 + this.count2; }, }, });
然后在组件App.vue中获取sum
<template> <div>{{ piniaStoreA.sum }}</div> </template> <script setup> import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() console.log(piniaStoreA.sum) //3 </script>
让我们来看下什么是缓存特性。首先我们在组件多次访问sum再看下控制台打印
import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() console.log(piniaStoreA.sum) console.log(piniaStoreA.sum) console.log(piniaStoreA.sum) piniaStoreA.count1 = 2 console.log(piniaStoreA.sum)
从打印结果我们可以看出只有在首次使用用或者当我们改变sum所依赖的值的时候，getters中的sum才会被调用
Vuex
Vuex中的getters使用和Pinia的使用方式类似，就不再进行过多说明,写法如下vuexStore/index.js
import { createStore } from "vuex"; export default createStore({ strict: true, //全局state，类似于vue种的data state: { count1: 1, count2: 2, }, //类似于vue中的计算属性 getters: { sum(state){ return state.count1 + state.count2 } } });
modules
如果项目比较大，使用单一状态库，项目的状态库就会集中到一个大对象上，显得十分臃肿难以维护。所以Vuex就允许我们将其分割成模块（modules），每个模块都拥有自己state，mutations,actions...。而Pinia每个状态库本身就是一个模块。
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", {...});
Vuex
一般来说每个module都会新建一个文件，然后再引入这个总的入口index.js中，这里为了方便就写在了一起
import { createStore } from "vuex"; const moduleA = { state: () => ({ count:1 }), mutations: { setCount(state, data) { state.count = data; }, }, actions: { getuser() { //do something }, }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } export default createStore({ strict: true, //全局state，类似于vue种的data state() { return { vuexmsg: "hello vuex", name: "xiaoyue", }; }, modules: { moduleA, moduleB }, });
使用moduleA
import { useStore } from 'vuex' let vuexStore = useStore() console.log(vuexStore.state.moduleA.count) //1 vuexStore.commit('setCount', 2) console.log(vuexStore.state.moduleA.count) //2 vuexStore.dispatch('getuser')
一般我们为了防止提交一些mutation或者actions中的方法重名，modules一般会采用命名空间的方式 namespaced: true 如moduleA：
const moduleA = { namespaced: true, state: () => ({ count: 1, }), mutations: { setCount(state, data) { state.count = data; }, }, actions: { getuser() { //do something }, }, }
此时如果我们再调用setCount或者getuser
vuexStore.commit('moduleA/setCount', 2) vuexStore.dispatch('moduleA/getuser')
写在最后
通过以上案例我们会发现Pinia比Vuex简洁许多，所以如果我们的项目是新项目的话建议使用Pinia。 当然如果我们的项目体量不是很大，我们其实没必要引入vue的状态管理库，盲目的使用反而会徒增心智负担。
如果感觉这篇文章对你有帮助的话请点个赞吧orz。
