首页 > 其他分享 >解析 Pinia 和 Vuex

解析 Pinia 和 Vuex

时间：2023-05-23 22:13:43浏览次数：47  
标签：vue Pinia vuex state storeA piniaStoreA import 解析 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

import  createStore  from \'vuex\'

export default createStore(
    //全局state，类似于vue种的data
    state() 
      return 
        vuexmsg: "hello vuex",
        name: "xiaoyue",
      ;
    ,


    //修改state函数
    mutations: 
    ,

    //提交的mutation可以包含任意异步操作
    actions: 
    ,

    //类似于vue中的计算属性
    getters: 
    ,

    //将store分割成模块（module）,应用较大时使用
    modules: 
    
)
复制代码

main.js引入

import  createApp  from \'vue\'
import App from \'./App.vue\'
import store from \'@/store\'
createApp(App).use(store).mount(\'#app\')

复制代码

App.vue测试

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

复制代码

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

Pinia

  • main.js引入
import  createApp  from "vue";
import App from "./App.vue";
import createPinia from \'pinia\'
const pinia = createPinia()
createApp(App).use(pinia).mount("#app");

复制代码
  • 创建Store

src下新建piniaStore/storeA.js

import  defineStore  from "pinia";

export const storeA = defineStore("storeA", 
  state: () => 
    return 
      piniaMsg: "hello pinia",
    ;
  ,
  getters: ,
  actions: ,
);

复制代码
  • App.vue使用
<template>
  <div></div>
</template>
<script setup>
import  storeA  from \'@/piniaStore/storeA\'
let piniaStoreA = storeA()
console.log(piniaStoreA.piniaMsg); //hello pinia
</script>
复制代码

从这里我们可以看出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

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

</script>

复制代码

可以看出我们是可以直接在组件中修改state的而且还是响应式的，但是如果这样做了，vuex不能够记录每一次state的变化记录，影响我们的调试。当vuex开启严格模式的时候，直接修改state会抛出错误，所以官方建议我们开启严格模式，所有的state变更都在vuex内部进行，在mutations进行修改。例如vuexStore/index.js:

import  createStore  from "vuex";

export default createStore(
  strict: true,
  //全局state，类似于vue种的data
  state: 
    vuexmsg: "hello vuex",
  ,

  //修改state函数
  mutations: 
    setVuexMsg(state, data) 
      state.vuexmsg = data;
    ,
  ,

  //提交的mutation可以包含任意异步操作
  actions: ,

  //类似于vue中的计算属性
  getters: ,

  //将store分割成模块（module）,应用较大时使用
  modules: ,
);

复制代码

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

<template>
  <div> vuexStore.state.vuexmsg </div>
</template>
<script setup>
import  useStore  from \'vuex\'
let vuexStore = useStore()
vuexStore.commit(\'setVuexMsg\', \'hello juejin\')
console.log(vuexStore.state.vuexmsg) //hello juejin

</script>
复制代码

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

import  createStore  from "vuex";
export default createStore(
  strict: true,
  //全局state，类似于vue种的data
  state() 
    return 
      vuexmsg: "hello vuex",
    
  ,

  //修改state函数
  mutations: 
    setVuexMsg(state, data) 
      state.vuexmsg = data;
    ,
  ,

  //提交的mutation可以包含任意异步操作
  actions: 
    async getState( commit ) 
      //const result = await xxxx 假设这里进行了请求并拿到了返回值
      commit("setVuexMsg", "hello juejin");
    ,
  
);

复制代码

组件中使用dispatch进行分发actions

<template>
  <div> vuexStore.state.vuexmsg </div>
</template>
<script setup>
import  useStore  from \'vuex\'
let vuexStore = useStore()
vuexStore.dispatch(\'getState\')

</script>
复制代码

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

Pinia

  • 直接修改

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

<template>
  <div> piniaStoreA.piniaMsg </div>
</template>
<script setup>
import  storeA  from \'@/piniaStore/storeA\'
let piniaStoreA = storeA()
console.log(piniaStoreA.piniaMsg); //hello pinia

piniaStoreA.piniaMsg = \'hello juejin\'
console.log(piniaStoreA.piniaMsg); //hello juejin

</script>

复制代码
  • $patch

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

import  defineStore  from "pinia";

export const storeA = defineStore("storeA", 
  state: () => 
    return 
      piniaMsg: "hello pinia",
      name: "xiaoyue",
    ;
  ,
  getters: ,
  actions: ,
);

复制代码

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

import  storeA  from \'@/piniaStore/storeA\'
let piniaStoreA = storeA()
console.log(piniaStoreA.name); //xiaoyue
piniaStoreA.$patch(
  piniaMsg: \'hello juejin\',
  name: \'daming\'
)
console.log(piniaStoreA.name);//daming

复制代码

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

piniaStoreA.$patch(
  name: \'daming\'
)
复制代码

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

import  storeA  from \'@/piniaStore/storeA\'
let piniaStoreA = storeA()
cartStore.$patch((state) => 
  state.name = \'daming\'
  state.piniaMsg = \'hello juejin\'
)

复制代码
  • 在actions中进行修改

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

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

import  defineStore  from "pinia";
export const storeA = defineStore("storeA", 
  state: () => 
    return 
      piniaMsg: "hello pinia",
      name: "xiao yue",
    ;
  ,
  actions: 
    setName(data) 
      this.name = data;
    ,
  ,
);

复制代码

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

import  storeA  from \'@/piniaStore/storeA\'
let piniaStoreA = storeA()
piniaStoreA.setName(\'daming\')
复制代码
  • 重置state

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

import  storeA  from \'@/piniaStore/storeA\' 
let piniaStoreA = storeA()
piniaStoreA.$reset()

复制代码

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的状态管理库，盲目的使用反而会徒增心智负担。

 

参考

https://it.cha138.com/python/show-4278571.html

标签：vue,Pinia,vuex,state,storeA,piniaStoreA,import,解析,Vuex
From： https://www.cnblogs.com/miangao/p/17426529.html

相关文章

  • 【linux基础】ftok函数解析
    前言最新项目代码有关信号量、共享内存，直接使用数值，不能得到预想的效果，调试发现不能直接使用数值，而是ftok函数获取键值，此前不了解，故记录之。原理共享内存、消息队列、信号量都是通过一个中间介质来进行通信的，这种介质多的是。就是怎么区分出来，就像唯一一个身份证来区分人一样。......
  • RAW8图像数据格式解析
    前言使用7yuv工具查看raw8图像数据，选择的格式是8bpp格式，大小是图像尺寸1280*720即可；RAW格式raw数据是sensor输出的原始数据，一般有raw8,raw10,raw12等，分别表示一个像素点有8bit、10bit、12bit数据。是sensor将光信号转化为电信号时的电平高低的原始记录，单纯地没有进行任何处......
  • 我的第一个项目(十三) :组件间传值的一些方案(vuex,eventbus,localStorage)
    好家伙， 先说一下我的需求，我要组件间传值 1.eventBus前端兄弟组件传值eventbus无法使用不报错也不触发，就很奇怪//eventBus.jsimportVuefrom"vue";exportdefaultnewVue();//Mylogin.vue<buttontype="button"class="btnbtn-primary"@click="login&quo......
  • python生成13位或16位时间戳以及反向解析时间戳
    importdatetimeimporttimedefget_float_time_stamp():datetime_now=datetime.datetime.now()returndatetime_now.timestamp()defget_time_stamp16():#生成16时间戳eg:1540281250399895-lndatetime_now=datetime.datetime.now()print(datetim......
  • Rails:从URL解析路由信息
    ###在Rails3中,您可以执行以下操作:Rails.application.routes.recognize_path"/accounts/1"#{:action=>"show",:controller=>"accounts",:id=>"1"}ActionController::Routing::Routes.recognize_path("/accounts/1&q......
  • 万字长文之HashMap源码解析（包含红黑树）
    〇、储备知识之红黑树0.1>2-3树红黑树是一种自平衡的二叉树，它可以避免二分搜索树在极端的情况下蜕化成链表的情况。那么什么是红黑树呢？要想便于了解红黑树，我们先了解一下跟它息息相关的2-3树。2-3树是一种绝对平衡的多叉树，在这棵树中，任意一个节点，它的左右子树的高度是相同的。如下......
  • （二）Spring源码解析：默认标签解析
    一、概述还记得我们在上一讲末尾提到的关于默认标签解析和自定义标签解析吧。本讲就来针对默认标签解析进行讲解。为了便于衔接上一讲的内容，我们将源码部分粘贴出来：从上图中的源码中，我们可以看出默认标签的解析是在parseDefaultElement(ele,delegate)方法中实现的。我们来看一下这......
  • （三）Spring源码解析：自定义标签解析
    一、使用示例步骤1：创建User实体步骤2：定义一个XSD文件描述组件内容步骤3：创建BeanDefinitionParser接口的实现类，用来解析XSD文件中的定义和组件定义。步骤4：创建NamespaceHandlerSupport实现类，目的是将组件注册到Spring容器中。步骤5：编写spring.handlers和spring.schemas文件，默认位置......
  • Abp Vnext 动态(静态)API客户端源码解析
    根据以往的经验，通过接口远程调用服务的原理大致如下：服务端：根据接口定义方法的签名生成路由，并暴露Api。客户端：根据接口定义方法的签名生成请求，通过HTTPClient调用。这种经验可以用来理解ABPVNext自动API的方式，但如果不使用自动API并且控制器定义了路由的情况下，远程调用的路......
  • delphi RTC 解析statucode 问题
    开源的版本也一样会。rtcinfo.pas，以下的解析 StatusCode 有问题，如果服务器返回的是“HTTP/1.1200” 后面没有状态文本。会解析不到 状态码，这里应该按标准格式来，协议 空格 状态码 空格 状态文本一个一个解析才对，但是RTC 认为状态码、文本是要一起有的。例子：同一个请......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99