ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Pinia VS Vuex

2022-09-13 15:02:39  阅读:214  来源: 互联网

标签:vue actions 修改 state VS Pinia Vuex


Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。

本文将通过Vue3的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。

既然我们要对比两者的实现方式,那么我们肯定要先在我们的Vue3项目中引入这两个状态管理器(实际项目中千万不要即用Vuex又用Pinia,不然你会被同事请去喝茶的。下面就让我们看下它们的使用方式吧。

安装

  • Vuex
    npm i vuex -S

  • Pinia
    npm i pinia -S

挂载

  Vuex    

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

新建vuexStore/index.js

 main.js引入

 App.vue测试

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

Pinia

  • main.js引入

  • 创建Store

src下新建piniaStore/storeA.js

  • App.vue使用

从这里我们可以看出pinia中没有了mutations和modules,pinia不必以嵌套(通过modules引入)的方式引入模块,因为它的每个store便是一个模块,如storeA,storeB... 。

在我们使用Vuex的时候每次修改state的值都需要调用mutations里的修改函数(下面会说到),因为Vuex需要追踪数据的变化,这使我们写起来比较繁琐。而pinia则不再需要mutations,同步异步都可在actions进行操作,至于它没有了mutations具体是如何最终到state变化的,这里我们不过多深究,大概好像应该是通过hooks回调的形式解决的把(我也没研究过,瞎猜的)。

修改状态

获取state的值从上面我们已经可以一目了然的看到了,下面让我们看看他俩修改state的方法吧

vuex

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

可以看出我们是可以直接在组件中修改state的而且还是响应式的,但是如果这样做了,vuex不能够记录每一次state的变化记录,影响我们的调试。

当vuex开启严格模式的时候,直接修改state会抛出错误,所以官方建议我们开启严格模式,所有的state变更都在vuex内部进行,在mutations进行修改。例如vuexStore/index.js:

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

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

 组件中使用dispatch进行分发actions

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

Pinia

  • 直接修改

相比于Vuex,Pinia是可以直接修改状态的,并且调试工具能够记录到每一次state的变化,如App.vue

  • $patch

使用$patch方法可以修改多个state中的值,比如我们在piniaStore/storeA.js中的state增加一个name

 然后我们在App.vue中进行修改这两个state

 当然也是支持修改单个状态的如

 $patch还可以使用函数的方式进行修改状态

  • 在actions中进行修改

不同于Vuex的是,Pinia去掉了mutations,所以在actions中修改state就行Vuex在mutations修改state一样。其实这也是我比较推荐的一种修改状态的方式,就像上面说的,这样可以实现整个数据流程都在状态管理器内部,便于管理。

在piniaStore/storeA.js的actions添加一个修改name的函数

 组件App.vue中调用不需要再使用dispatch函数,直接调用store的方法即可

  • 重置state

Pinia可以使用$reset将状态重置为初始值

Pinia解构(storeToRefs)

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

 浏览器展示如下

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

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

再看下页面变化

 我们发现页面已经被更新成daming了

getters

其实Vuex中的getters和Pinia中的getters用法是一致的,用于自动监听对应state的变化,从而动态计算返回值(和vue中的计算属性差不多),并且getters的值也具有缓存特性。

Pinia

我们先将piniaStore/storeA.js改为

 然后在组件App.vue中获取sum

 让我们来看下什么是缓存特性。首先我们在组件多次访问sum再看下控制台打印

 

 从打印结果我们可以看出只有在首次使用用或者当我们改变sum所依赖的值的时候,getters中的sum才会被调用

Vuex

Vuex中的getters使用和Pinia的使用方式类似,就不再进行过多说明,写法如下

vuexStore/index.js

modules

如果项目比较大,使用单一状态库,项目的状态库就会集中到一个大对象上,显得十分臃肿难以维护。所以Vuex就允许我们将其分割成模块(modules),每个模块都拥有自己state,mutations,actions...。而Pinia每个状态库本身就是一个模块。

Pinia

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

Vuex

一般来说每个module都会新建一个文件,然后再引入这个总的入口index.js中,这里为了方便就写在了一起

 使用moduleA

 一般我们为了防止提交一些mutation或者actions中的方法重名,modules一般会采用命名空间的方式 namespaced: true 如moduleA:

 此时如果我们再调用setCount或者getuser

 

 

 

 

 

 

 

标签:vue,actions,修改,state,VS,Pinia,Vuex
来源: https://www.cnblogs.com/zhaoeh/p/16689102.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[[email protected]]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有