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

Vuex和Pinia详解

时间：2024-07-29 09:24:54浏览次数：13  
标签：Pinia state 详解 storeA piniaStoreA import Vuex

Vuex基础知识

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的核心构成要素包括：

  1. State（状态）：存储应用的状态。
  2. Getter（获取器）：从状态中派生出状态。
  3. Mutation（突变）：同步地更改状态。
  4. Action（动作）：提交 mutation，可以包含异步操作。
  5. Module（模块）：将状态和变更分割成模块。

 安装

npm i vuex -S
复制代码

挂载

在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已经挂载成功了 

修改状态

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

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内部进行便于检测。直接看图，一目了然

 

 getters

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每个状态库本身就是一个模块。

一般来说每个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 基础知识


核心构成要素
Pinia 是 Vue 的新一代状态管理库，它提供了更简洁的 API 和更好的开发体验。Pinia 的核心构成要素包括：

  1. State（状态）：存储应用的状态。
  2. Getter（获取器）：从状态中派生出状态。
  3. Action（动作）：可以包含同步和异步操作。
  4. Store（存储）：定义状态、获取器和动作的地方。

 安装

npm i pinia -S

  • 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，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

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

我们先将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才会被调用

modules

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 与 Pinia 的区别


语法和结构：Vuex 的语法相对较为复杂，而 Pinia 的语法更加简洁和直观。
模块系统：Vuex 支持模块系统，可以将状态拆分成多个模块进行管理，而 Pinia 也提供了类似的功能，但更加灵活和易于使用。
类型支持：Pinia 提供了更好的类型支持，可以在代码中获得更好的类型推断和提示。
开发体验：Pinia 在开发体验上更加友好，提供了更多的辅助函数和工具，使开发更加高效。

 

总结


Vuex 和 Pinia 都是优秀的 Vue 状态管理库，它们在功能和性能上都有出色的表现。选择哪一个取决于你的项目需求和个人偏好。以下是对两者的一些总结和建议：

Vuex 的优点


成熟稳定：Vuex 已经存在很长时间，社区和文档非常完善。
模块化支持：Vuex 提供了强大的模块化支持，可以将状态拆分成多个模块进行管理。
严格的约束：Vuex 的严格约束有助于保持代码的一致性和可维护性。


Vuex 的缺点


语法复杂：Vuex 的语法相对较为复杂，初学者可能需要一些时间来适应。
冗长的代码：由于 Vuex 的严格约束，代码可能会变得冗长和重复。


Pinia 的优点


简洁直观：Pinia 的 API 设计更加简洁和直观，降低了学习曲线。
更好的类型支持：Pinia 提供了更好的 TypeScript 支持，使得开发体验更佳。
灵活性高：Pinia 提供了更多的灵活性，可以更方便地进行状态管理。


Pinia 的缺点


相对较新：Pinia 相对于 Vuex 来说较为新颖，社区和文档可能不如 Vuex 完善。
生态系统：由于 Pinia 较新，相关的插件和工具可能不如 Vuex 丰富。


选择建议


如果你是一个 Vue 的新手，或者希望快速上手一个状态管理库，Pinia 可能是一个更好的选择。
如果你正在维护一个老的 Vue 项目，或者需要一个成熟稳定的解决方案，Vuex 可能更适合你。
如果你使用 TypeScript 开发，Pinia 提供了更好的类型支持，可能会让你的开发体验更好。
无论选择哪一个库，都建议你深入理解它们的核心概念和使用方式，并根据项目需求进行合理的选择。

标签：Pinia,state,详解,storeA,piniaStoreA,import,Vuex
From： https://blog.csdn.net/msq6678/article/details/140761522

相关文章

  • 【Python学习手册（第四版）】学习笔记06-Python动态类型-赋值模型详解
    个人总结难免疏漏，请多包涵。更多内容请查看原文。本文以及学习笔记系列仅用于个人学习、研究交流。主要介绍Python的动态类型（也就是Python自动为跟踪对象的类型，不需要在脚本中编写声明语句），Python中变量和对象是如何通过引用关联，垃圾收集的概念，对象共享引用是如何影响多个变量......
  • Python学习手册（第四版）】学习笔记09.3-Python对象类型-分类、引用VS拷贝VS深拷贝、比较
    个人总结难免疏漏，请多包涵。更多内容请查看原文。本文以及学习笔记系列仅用于个人学习、研究交流。这部分稍杂，视需要选择目录读取。主要讲的是对之前的所有对象类型作复习，以通俗易懂、由浅入深的方式进行介绍，所有对象类型共有的特性（例如，共享引用），引用、拷贝、深拷贝，以及比较、......
  • 简单工厂模式详解
    一，概述        简单工厂模式属于创建型模式又叫做静态工厂方法模式，它属于类创建型模式。在简单工厂模式中，可以根据参数的不同返回不同类的实例。        简单工厂模式专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。      ......
  • 去耦技术详解
    1简介如下图所示，微小的电源变化会产生输入和输出电压的微小变化。放大器对电源变化的灵敏度通常用电源抑制比（PSRR）来量化，其定义为电源电压变化与输出电压变化比值。直流下PSRR会比较高，但较高频率下会迅速降低，此时电源线路上有越来越多的无用能量会直接耦合至输出。2改进措......
  • 文件上传漏洞--之upload-labs靶场详解11-15关
    第11关第一步：查看源码这是一个白名单，里面限制了只可以提供它所规定文件jpg，png,gif。 这段PHP代码主要实现了文件上传的功能，并进行了一些条件判断和处理： 首先，定义了两个变量 $is_upload 并初始化为 false ，$msg 初始化为 null 。 然后，检查是否通过 PO......
  • C++从入门到起飞之——内存管理(万字详解) 全方位剖析！
    ......
  • 构建大规模账号池与本地部署：GitHub爬虫项目详解
    账号池搭建必要性常见登录方式：基于Session+Cookie的登录基于JWT的登录：登录生成JWT字符串账号池存储cookie或者JWT字符串方便后续发请求爬取数据本地部署conda建立一个虚拟环境condacreate-nnew_envpython=3.x#替换x为你需要的Python版本激活新建环......
  • 微服务安全——SpringSecurity6详解
    文章目录说明SpringSecurity认证快速开始设置用户名密码基于application.yml方式基于JavaBean配置方式设置加密方式自定义用户加载方式自定义登录页面前后端分离认证认证流程SpringSecurity授权web授权:基于url的访问控制自定义授权失败异常处理方法授权:基于注解的访......
  • C语言输出函数printf详解
    printf1.1基本类型printf()的作用是将参数文本输出到屏幕。f代表format（格式化），表示可以定制输出文本的格式。printf()的头文件是stdio.h例如：#include<stdio.h>intmain(){ printf("HelloWorld"); return0;}1.2占位符printf()可以在输出文本中指定占位符......
  • 2024牛客多校第四场F.Good Tree 挑战全网最详解
    好吧标题党了一回，但我相信有不少人被出题人的那句“手玩一下就知道了”无语住了像我这种憨憨一旦想偏了就救不回来了，于是困惑了好久，在雨巨的指导下彻底搞懂（此处大声谢谢雨巨，又有实力又会讲题又认真答疑每一个问题，呜呜呜我永远的姐）题意简单来说就是定义f(i)为树上i点到其他所有......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99