Vue 状态管理深入研究:Vuex 和 Pinia 的原理与实践对比

news/2024/7/25 3:15:23/文章来源:https://blog.csdn.net/liyananweb/article/details/139149812

推荐一个AI网站,免费使用豆包AI模型,快去白嫖👉海鲸AI

👋 引言

在 Vue.js 应用程序中,状态管理是一个至关重要的方面。它有助于集中管理应用的状态,使组件之间的数据共享更加高效和可维护。Vuex 和 Pinia 是两个常用的 Vue 状态管理库,它们都提供了强大的功能来帮助我们更好地管理应用状态。本文将深入剖析 Vuex 和 Pinia,从原理到实践进行全面对比。

📌 Vuex 基础知识

核心构成要素

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

  • State(状态):存储应用的状态。
  • Getter(获取器):从状态中派生出状态。
  • Mutation(突变):同步地更改状态。
  • Action(动作):提交 mutation,可以包含异步操作。
  • Module(模块):将状态和变更分割成模块。

示例代码

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},getters: {doubleCount: state => state.count * 2},mutations: {increment (state) {state.count++;}},actions: {asyncIncrement ({ commit }) {setTimeout(() => {commit('increment');}, 1000);}}
});export default store;// 在组件中使用 Vuex
<template><div><p>{{ count }}</p><p>{{ doubleCount }}</p><button @click="increment">Increment</button><button @click="asyncIncrement">Async Increment</button></div>
</template><script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';export default {computed: {...mapState(['count']),...mapGetters(['doubleCount'])},methods: {...mapMutations(['increment']),...mapActions(['asyncIncrement'])}
};
</script>

📌 Pinia 基础知识

核心构成要素

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

  • State(状态):存储应用的状态。
  • Getter(获取器):从状态中派生出状态。
  • Action(动作):可以包含同步和异步操作。
  • Store(存储):定义状态、获取器和动作的地方。

示例代码

// store.js
import { defineStore } from 'pinia';export const useStore = defineStore('main', {state: () => ({count: 0}),getters: {doubleCount: (state) => state.count * 2},actions: {increment() {this.count++;},asyncIncrement() {setTimeout(() => {this.increment();}, 1000);}}
});// 在组件中使用 Pinia
<template><div><p>{{ count }}</p><p>{{ doubleCount }}</p><button @click="increment">Increment</button><button @click="asyncIncrement">Async Increment</button></div>
</template><script>
import { useStore } from './store';export default {setup() {const store = useStore();return {...store};}
};
</script>

📌 Vuex 与 Pinia 的区别

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

📌 使用示例与对比

Vuex 示例

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {message: 'Hello Vuex'},mutations: {setMessage(state, payload) {state.message = payload;}},actions: {updateMessage({ commit }, payload) {commit('setMessage', payload);}}
});export default store;// 在组件中使用 Vuex
<template><div><p>{{ message }}</p><input v-model="newMessage" placeholder="Enter new message"><button @click="updateMessage(newMessage)">Update Message</button></div>
</template><script>
import { mapState, mapMutations, mapActions } from 'vuex';export default {data() {return {newMessage: ''};},computed: {...mapState(['message'])},methods: {...mapMutations(['setMessage']),...mapActions(['updateMessage'])}
};
</script>

Pinia 示例

// store.js
import { defineStore } from 'pinia';export const useStore = defineStore('main', {state: () => ({message: 'Hello Pinia'}),actions: {setMessage(payload) {this.message = payload;},updateMessage(payload) {this.setMessage(payload);}}
});// 在组件中使用 Pinia
<template><div><p>{{ message }}</p><input v-model="newMessage" placeholder="Enter new message"><button @click="updateMessage(newMessage)">Update Message</button></div>
</template><script>
import { useStore } from './store';export default {setup() {const store = useStore();const newMessage = ref('');return {...store,newMessage};}
};
</script>

📌 总结

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

Vuex 的优点

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

Vuex 的缺点

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

Pinia 的优点

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

Pinia 的缺点

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

选择建议

  • 如果你是一个 Vue 的新手,或者希望快速上手一个状态管理库,Pinia 可能是一个更好的选择。
  • 如果你正在维护一个老的 Vue 项目,或者需要一个成熟稳定的解决方案,Vuex 可能更适合你。
  • 如果你使用 TypeScript 开发,Pinia 提供了更好的类型支持,可能会让你的开发体验更好。

无论选择哪一个库,都建议你深入理解它们的核心概念和使用方式,并根据项目需求进行合理的选择。

参考资料

  • Vuex 官方文档
  • Pinia 官方文档

通过对 Vuex 和 Pinia 的深入剖析和对比,希望你能更好地理解这两个状态管理库,并在实际项目中做出最佳选择。Happy coding!

推荐一个AI网站,免费使用豆包AI模型,快去白嫖👉海鲸AI

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1053741.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 泛型函数

1.非约束 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace MyGeneirc {public class GeneircMethod{/// <summary>/// 泛型方法解决&#xff0c;一个方法&#xff0c;满足不同参数类型…

C++算术运算和自增自减运算

一 引言 表示运算的符号称为运算符。 算术运算&#xff1b; 比较运算&#xff1b; 逻辑运算&#xff1b; 位运算&#xff1b; 1 算术运算 算术运算包括加、减、乘、除、乘方、指数、对数、三角函数、求余函数&#xff0c;这些都是算术运算。 C中用、-、*、/、%分别表示加、减…

Linux——多线程(一)

一、线程的概念 1.1线程概念 教材中的概念&#xff1a; (有问题?) 线程是进程内部的一个执行分支&#xff0c;线程是CPU调度的基本单位 之前我们讲的进程&#xff1a; 加载到内存中的程序&#x…

重学java 49 List接口

但逢良辰&#xff0c;顺颂时宜 —— 24.5.28 一、List接口 1.概述: 是collection接口的子接口 2.常见的实现类: ArrayList LinkedList Vector 二、List集合下的实现类 1.ArrayList集合的使用及源码分析 1.概述 ArrayList是List接口的实现类 2.特点 a.元素有序 —> 按照什么顺…

简单随机数据算法

文章目录 一&#xff0c;需求概述二&#xff0c;实现代码三、测试代码四、测试结果五、源码传送六、效果演示 一&#xff0c;需求概述 系统启动时&#xff0c;读取一组图片数据&#xff0c;通过接口返回给前台&#xff0c;要求&#xff1a; 图片随机相邻图片不重复 二&#…

Node.js和npm常用命令

一、Node.js简介 Node.js是一个免费、开源、跨平台的JavaScript运行时环境&#xff0c;允许开发人员创建服务器、web应用程序、命令行工具和脚本。 点击查看node.js中文官网 点击查看node.js英文官网 二、npm简介 npm(Node Package Manager)是Node.js的软件包管理器&#xff0…

三层交换机基本配置,动态路由链接

<Huawei>system-view //进入系统视图[Huawei]undo info-center enable //关日志[Huawei]vlan batch 2 3 //创建vlan2与3[Huawei]display vlan //检查[Huawei]interface GigabitEthernet 0/0/2 //进2口[Huawei-GigabitEthernet0/0/2]port link-type access //配置…

安全态势管理的六大挑战:态势感知

德迅云安全鉴于如今的安全威胁不断变幻&#xff0c;企业对实施态势管理策略至关重要&#xff0c;可以让安全团队根据需要进行安全策略的动态调整。如果企业在研究构建态势感知管理&#xff0c;需要特别关注以下六个方面的挑战。 如果企业正在使用一个或多个平台&#xff0c;那么…

如何用分立器件设计一个过流保护电路

过流保护电路是指当后级负载电流过大或者发生短路时&#xff0c;自动切断电源与后级负载&#xff0c;从而防止大电流损害电源电路&#xff0c;过流保护又叫OCP。 常见的过流保护电路有保险丝过流保护&#xff0c;集成的过流保护芯片&#xff0c;还有这种分立器件搭建的过流保护…

【vue-cli搭建vue项目的过程2.x】

vue-cli搭建vue项目 vue-cli搭建vue项目安装node安装vue-cli脚手架并创建项目安装 Ant Design Vue或element-ui(笔者使用Ant-design-vue组件&#xff0c;并全局引入)开发安装三方库包1、Package.json文件---引入如下package.json文件执行npm i或npm install命令即可下载如下依赖…

java多线程创建方式

1. 继承Thread类 这种方式是通过创建一个新的类继承自Thread类&#xff0c;并覆盖run()方法来创建线程。然后通过创建这个类的对象并调用其start()方法来启动线程。 public class MyThread extends Thread { public void run() { // 在这里定义线程的执行逻辑 …

基于小波分析和机器学习(SVM,KNN,NB,MLP)的癫痫脑电图检测(MATLAB环境)

癫痫是一种由大脑神经元突发性异常放电导致的大脑功能性障碍疾病。据世界卫生组织统计&#xff0c;全球约有7000万人患有癫痫。癫痫患者在发病时呈现肌肉抽搐、呼吸困难、意识丧失等症状。由于癫痫发作的偶然性&#xff0c;患者极有可能在高空、驾驶、游泳等危险情况下发病并丧…

SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测预测效果基本介绍程序设…

Python条件分支与循环

大家好&#xff0c;当涉及到编写高效和灵活的程序时&#xff0c;条件分支和循环是 Python 中至关重要的概念。它们允许我们根据不同的条件执行不同的代码块&#xff0c;或者重复执行一组语句。条件分支和循环是测试开发工程师在日常工作中经常使用的工具&#xff0c;无论是编写…

kind: Telemetry

访问日志 访问日志提供了一种从单个工作负载实例的角度监控和理解行为的方法。 Istio 能够以一组可配置的格式为服务流量生成访问日志&#xff0c; 使操作员可以完全控制日志记录的方式、内容、时间和地点。 有关更多信息&#xff0c;请参阅获取 Envoy 的访问日志。 https:/…

二叉树(概念详解)

目录 树树的概念完全二叉树和满二叉树完全二叉树存储完全二叉树用数组存储堆 树 树是一种非线性的数据结构 树是根朝上的&#xff0c;叶子是朝下的 树是递归定义的【根N棵子树】 递归定义&#xff1a;大事化小&#xff0c;可以理解为套娃 树的子树之间是独立的&#xff0c;所…

conda 环境找不到 libnsl.so.1

安装prokka后运行报错 perl: error while loading shared libraries: libnsl.so.1: cannot open shared object file: No such file or directory 通过conda list 可以看到 有libsnl 2.00版本&#xff0c;通过修改软链接方式进行欺骗

面试题:字符串“1024“不强转怎么变成数字1024(ASCII应用)

面试题&#xff1a;就是面试官很秀的场合。怎么把字符串"1024"转成1024 1.ASCII码表是什么&#xff1f; ASCII(American Standard Code for Information Interchange)码表使用用于将字符转换成对应数字的编码规范。它由美国国家标准协会(ANSI)于1963年制定&#xf…

Llama模型家族训练奖励模型Reward Model技术及代码实战(二)从用户反馈构建比较数据集

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

AAAI2024 基于扩散模型 多类别 工业异常检测 DiAD

前言 本文分享一个基于扩散模型的多类别异常检测框架&#xff0c;用于检测工业场景的缺陷检测或异常检测。 设计SG语义引导网络&#xff0c;在重建过程中有效保持输入图像的语义信息&#xff0c;解决了LDM在多类别异常检测中的语义信息丢失问题。高效重建&#xff0c;通过在潜…