关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

一文解析Pinia和Vuex,带你全面理解这两个Vue状态管理模式(下)

发布时间:2023-06-26 16:00:33

Pinia解构(storeToRefs)



当我们组件中需要用到state中多个参数时,使用解构的方式取值往往是很方便的,但是传统的ES6解构会使state失去响应式,比如组件App.vue,我们先解构取得name值,然后再去改变name值,然后看页面是否变化

 { { name }}import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() let { piniaMsg, name } = piniaStoreA piniaStoreA.$patch({  name: 'daming' }) " _ue_custom_node_="true">

   

浏览器展示如下

我们可以发现浏览器并没有更新页面为daming

为了解决这个问题,Pinia提供了一个结构方法storeToRefs,我们将组件App.vue使用storeToRefs解构

 { { name }}import { storeA } from '@/piniaStore/storeA' import { storeToRefs } from 'pinia' let piniaStoreA = storeA() let { piniaMsg, name } = storeToRefs(piniaStoreA) piniaStoreA.$patch({  name: 'daming' }) " _ue_custom_node_="true">

   

再看下页面变化

我们发现页面已经被更新成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

 { { piniaStoreA.sum }}import { storeA } from '@/piniaStore/storeA' let piniaStoreA = storeA() console.log(piniaStoreA.sum) //3 " _ue_custom_node_="true">

   

让我们来看下什么是缓存特性。首先我们在组件多次访问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。



/template/Home/leiyu/PC/Static