Vue的状态管理——Vuex34Pinia

Vue3中Vuex的使用_vue3 vuex-CSDN博客 

VueX详解_组合式vuex-CSDN博客

15分钟学会Pinia

Vuex 3和4详解

Vuex 3

Vuex 3是Vue.js 2.x版本的状态管理库,它提供了一种集中式存储和管理组件状态的方式。以下是Vuex 3的一些关键特性:

  1. 状态集中管理:Vuex 3的状态是集中存储的,所有的状态都放在一个树状结构中,并且只能通过mutations来修改状态。
  2. 响应式状态:当状态发生改变时,相关的组件会自动更新。
  3. 模块化:虽然Vuex 3本身不支持模块热替换,但可以通过将状态划分为不同的模块来提高代码的可维护性和可扩展性。
  4. 插件系统:Vuex 3的插件接口相对简单,通过storesubscribe方法来监听全部的状态变化。

Vuex 4

Vuex 4是Vue.js 3.x版本的状态管理库,它在Vuex 3的基础上进行了多项改进和优化,使其更加适用于大型应用和复杂场景。以下是Vuex 4的一些新特性:

  1. 状态分割和模块热替换:Vuex 4引入了状态分割和模块热替换的概念,状态可以分割成多个模块,每个模块拥有自己的状态、操作和订阅。这种分割的方式有助于组织和维护大型应用中的状态,并且可以通过热替换来动态添加或移除模块。
  2. 响应式状态管理改进:Vuex 4通过引入markRawshallowRef的概念,对响应性进行进一步改进。使用markRaw可以标记一个对象为非响应式的,使用shallowRef可以创建一个浅响应式对象,如果浅响应式对象的属性变化,不会触发组件的更新。
  3. 插件接口改进:Vuex 4通过引入subscribeActionsubscribeMutationsubscribeGetter方法来对插件接口进行改进,使得开发者可以更加细粒度地对应用程序的状态进行监听和处理。
  4. 性能优化:Vuex 4减少了状态变化时的不必要计算和更新,提高了性能。
  5. TypeScript支持:Vuex 4支持TypeScript,提供了更好的类型检查和开发工具支持。

Pinia详解

Pinia是Vue.js 3.x的状态管理库,它可以看作是Vuex的升级版,旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。以下是Pinia的一些关键特性:

  1. 状态管理:Pinia提供了一个集中的位置来存储和管理应用程序的状态。
  2. 模块化状态:Pinia支持将状态划分为不同的模块,以提高代码的可维护性和可扩展性。每个模块可以包含自己的状态、getters、mutations和actions。
  3. 状态订阅:Pinia允许开发者订阅状态的变化,并在状态发生变化时触发相应的回调函数。
  4. 缓存和持久化:Pinia支持缓存状态数据以提高性能,并支持将状态数据持久化到本地存储或后端数据库中。
  5. 与Vue.js生态系统无缝集成:Pinia与Vue.js的其他工具和库配合良好,可以轻松地与Vue Router等一起使用。
  6. 轻量级:Pinia非常轻巧,只有大约1kb的大小。
  7. 类型安全:通过类型推断,Pinia可以提供自动完成的功能。
  8. Vue Devtools支持:Pinia支持Vue Devtools,可以方便地进行调试。

Vuex 3、Vuex 4与Pinia的对比表格

特性/库Vuex 3Vuex 4Pinia
Vue版本兼容性Vue 2.xVue 3.xVue 3.x
状态管理方式集中存储,通过mutations修改集中存储,支持状态分割和模块热替换集中存储,模块化设计
响应式状态管理响应式,自动更新组件引入markRawshallowRef进行改进响应式,自动更新组件
插件接口简单,通过subscribe监听全部状态变化改进,引入subscribeActionsubscribeMutationsubscribeGetter灵活,支持多种扩展方式
TypeScript支持无原生支持,但可配合工具使用原生支持,提供更好的类型检查和开发工具支持原生支持,提供类型安全
模块化支持,但无模块热替换支持状态分割和模块热替换支持模块化状态管理
缓存和持久化需要额外插件或手动实现类似Vuex 3,可能需要额外插件或手动实现内置支持缓存和持久化
性能优化依赖于Vue 2.x的性能优化进一步优化了状态变化的计算和更新轻量化设计,性能良好
生态系统支持成熟,广泛应用于Vue 2.x项目逐渐完善,适用于Vue 3.x项目适用于Vue 3.x项目,新兴但受欢迎
学习曲线相对较陡峭,API较为复杂类似于Vuex 3,但引入了新特性和改进较简单,更直观,易于上手

Vuex 3 示例

安装 Vuex 3(注意:Vue 3 项目通常不使用 Vuex 3,但为了完整性,这里仍提供示例)

对于 Vue 2 项目,你可以安装 Vuex 3:

npm install vuex@3 --save

 

配置 Vuex Store(Vue 2 示例)

在 Vue 2 项目中,你可能会在 src/store/index.js 中设置 Vuex store:

import Vue from 'vue'; 
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ 
state: { 
count: 0 
}, 
mutations: { 
increment(state) { 
state.count++; 
} 
}, 
actions: { 
incrementIfOddOnRootSum({ state, commit, rootState }) { 
if ((state.count + rootState.otherCount) % 2 === 1) { 
commit('increment'); 
} 
} 
}, 
modules: { 
// 模块可以在这里定义 
} 
});

在 Vue 组件中使用 Vuex 3:

<template> 
<div>{{ count }}</div> 
<button @click="increment">Increment</button> 
</template> <script> 
export default { 
computed: { 
count() { 
return this.$store.state.count; 
} 
}, 
methods: { 
increment() { 
this.$store.commit('increment'); 
} 
} 
} 
</script>

注意:在 Vue 3 项目中,你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。

Vuex 4 示例

安装 Vuex 4

对于 Vue 3 项目,安装 Vuex 4:

npm install vuex@next --save # 或使用 vuex@4
import { createStore } from 'vuex'; export default createStore({ 
state() { 
return { 
count: 0 
}; 
}, 
mutations: { 
increment(state) { 
state.count++; 
} 
}, 
actions: { 
incrementIfOdd({ commit, state }) { 
if (state.count % 2 === 1) { 
commit('increment'); 
} 
} 
}, 
modules: { 
// 模块可以在这里定义 
} 
});

配置 Vuex Store(Vue 3 示例)

在 Vue 3 项目中,你可能会在 src/store/index.js 或 src/store/index.ts 中设置 Vuex store:

在 Vue 组件中使用 Vuex 4(与 Vuex 3 类似,但通常是在 Vue 3 上下文中):

<template> 
<div>{{ count }}</div> 
<button @click="increment">Increment</button> 
</template> <script> 
import { useStore } from 'vuex'; export default { 
setup() { 
const store = useStore(); const count = computed(() => store.state.count); const increment = () => { 
store.commit('increment'); 
}; return { count, increment }; 
} 
} 
</script>

注意这里使用了 Vue 3 的 Composition API。

Pinia 示例

安装 Pinia

npm install pinia --save

配置 Pinia Store

在 Vue 3 项目中,你可以在 src/stores/index.js 或 src/stores/index.ts 中设置 Pinia store:

import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { 
state: () => ({ 
count: 0 
}), 
actions: { 
increment() { 
this.count++; 
} 
} 
});

在 Vue 组件中使用 Pinia:

vue复制代码

<template> 
<div>{{ count }}</div> 
<button @click="increment">Increment</button> 
</template> <script> 
import { useCounterStore } from '@/stores/index'; export default { 
setup() { 
const store = useCounterStore(); const count = computed(() => store.count); const increment = () => { 
store.increment(); 
}; return { count, increment }; 
} 
} 
</script>

同样,这里也使用了 Vue 3 的 Composition API。注意,Pinia 的用法与 Vuex 4 在 Composition API 上下文中非常相似,但 Pinia 的 API 和概念可能更加直观和易于理解。

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

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

相关文章

建模杂谈系列250 Hello2Pymc

说明 pymc算是多年的老朋友了&#xff0c;中间失联了好几年。 内容 1 安装 安装更加麻烦了&#xff0c;不能很好的和其他的环境兼容。在官网上&#xff0c;也是建议用conda的方式安装。 conda create -c conda-forge -n pymc_env "pymc>5" conda activate p…

自闭症儿童托管学校

在自闭症儿童的成长道路上&#xff0c;寻找一个既能够提供专业康复又充满关爱的托管学校&#xff0c;是许多家庭的重要课题。星启帆自闭症儿童康复机构&#xff0c;作为国内规模较大的自闭症儿童托管学校&#xff0c;以其专业的师资力量、科学的康复方法、严格的管理制度以及温…

Milvus向量数据库-数据备份与恢复

前言 随着Milvus版本的持续迭代&#xff0c;越来越多的用户将其作为构建生产环境的向量数据服务使用。作为数据服务使用&#xff0c;其中的运维、数据安全、容灾备份自然是用户最关心且不容有失的需求。为解决这一需求&#xff0c;Milvus-backup项目工具应运而生。 Milvus-ba…

【并集查找 图论】2421. 好路径的数目

本文涉及知识点 C图论 LeetCode2421. 好路径的数目 给你一棵 n 个节点的树&#xff08;连通无向无环的图&#xff09;&#xff0c;节点编号从 0 到 n - 1 且恰好有 n - 1 条边。 给你一个长度为 n 下标从 0 开始的整数数组 vals &#xff0c;分别表示每个节点的值。同时给你…

【C++11及其特性】函数返回值当引用

函数返回值当引用目录 一.若返回变量为栈变量1.例子2.不能成为其他引用的初始值3.不能作为左值 二.若返回变量为静态变量或全局变量1.列子2.即可左值也可右值 三.若返回变量为形参1.普通形参2.引用形参 四.结论 一.若返回变量为栈变量 1.例子 返回的是局部变量的引用,这里用的…

【Python系列】SQLAlchemy 基本介绍

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

5.3二叉树——二叉树链式结构实现

本篇博客梳理二叉树链式结构 明确&#xff1a;二叉树是递归定义的 递归的本质&#xff1a;当前问题子问题&#xff0c;返回条件是最小规模的子问题 一、二叉树的遍历 1&#xff0e;前序、中序与后序遍历 &#xff08;1&#xff09;前序&#xff1a;根->左子树->右子树…

书生大模型实战营(1)——InterStudio基础知识+Vscode SSH连接远程服务器+Linux基础指令

参加书生.浦江大模型实战训练营&#xff0c;学习大模型知识和微调技术&#xff0c;所有课程免费&#xff0c;通过闯关的形式学习&#xff0c;也比较有趣。一起来了解LLM的世界。邀请链接 产品简介 InternStudio 是大模型时代下的云端算力平台。基于 InternLM 组织下的诸多算法…

经典文献阅读之--ParkingE2E(基于摄像头的端到端停车网络:从图像到规划)

0. 简介 自动泊车是智能驾驶领域的一项关键任务。传统泊车算法通常采用基于规则的方案来实现。然而&#xff0c;由于算法设计的复杂性&#xff0c;这些方法在复杂的泊车场景中效果欠佳。相比之下&#xff0c;基于神经网络的方法往往比基于规则的方法更加直观且功能多样。通过收…

ORACLE 统计信息的备份与恢复

备份 --需要先创建统计信息基础表 exec dbms_stats.create_stat_table(USER1,STAT_TIMESTAMP); --导出某个用户的所有统计信息 exec dbms_stats.export_schema_stats(USER1,STAT_TIMESTAMP);--测试(插入100条&#xff0c;更新统计信息&#xff0c;略) select num_rows,last_ana…

基于STM32开发的简易自动驾驶系统

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 系统初始化传感器数据采集与处理电机控制与转向OLED显示与状态提示Wi-Fi通信与远程监控应用场景 简易自动驾驶演示智能车模型开发与学习常见问题及解决方案 常见问题解决方案结论 1. 引言 随…

蜂鸣器奏乐

一、粗略了解简谱 拍号&#xff1a;如图&#xff0c;“2”表示一个小节有2拍&#xff0c;“4”表示4分音符为一拍 终止线表示歌曲结束 注意&#xff1a;以下音符都按以四分音符为一拍计算拍数 四分音符&#xff1a; 唱一拍 二分音符&#xff1a; 某一个音右边有一个小横线&…

中国招标投标平台JS逆向:DES加密与Python纯算还原

中国招标投标平台JS逆向&#xff1a;DES加密与Python纯算还原 目录 &#x1f510; JS DES解密&#x1f9ee; Python版本的纯算实现 &#x1f510; JS DES解密 在中国招标投标公共服务平台的分析过程中&#xff0c;发现了数据加密采用了DES算法。DES&#xff08;数据加密标准&…

github源码指引:C++嵌入式WEB服务器

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 相关专题&#xff1a; C嵌入式…

Broker服务器模块

一.Broker模块介绍 二.Broker模块具体实现 1. 类的成员变量与构造函数 成员变量 事件循环和TCP服务器: muduo::net::EventLoop _baseloop;muduo::net::TcpServer _server; 这些是muduo库提供的核心组件&#xff0c;负责处理网络事件和管理TCP连接。 消息分发和编码: muduo::…

Spring Security 认证源码超详细分析

Spring Security 认证源码超详细分析 认证&#xff08;Authentication&#xff09;是系统确认用户信息的重要途径&#xff0c;用户通过认证之后&#xff0c;系统才能明确用户的身份&#xff0c;进而才可以为该用户分配一定的权限&#xff0c;这个过程也叫授权&#xff08;Auth…

项目实战--Sa-Token详细方案笔记

Sa-Token权限系统设计 一、前言二、认证授权的概念三、Sa-Token简介3.1 Sa-Token使用方式3.2 踢人下线3.3 全局异常处理3.4 二级认证3.5 同端互斥登录3.6 Http Basic/Digest 认证3.6.1 HttpBasic认证3.6.2 Http Digest 认证 四、Sa-Token授权&#xff08;鉴权&#xff09;4.1 权…

详说 类和对象

类怎么定义 类是什么呢&#xff1f;类就是我们上篇文说的命名空间&#xff0c;单独创建一个域&#xff0c;自己有自己的生命空间&#xff0c;那么类怎么定义呢&#xff1f;C规定&#xff0c;假设 stack就是他的类名&#xff0c;那么前面要加个class&#xff0c;换行之后就是他…

汽车乘客热舒适度大挑战,如何利用仿真技术提高汽车环境舒适度

舒适性在人们选择汽车的决定性方面占比越来越重&#xff0c;而汽车乘员舱环境的舒适性是指为乘员提供舒适愉快便利的乘坐环境与条件&#xff0c;包括良好的平顺性、车内的低噪声、适宜的空气环境以及良好的驾驶操作性能。 舒适性 经济性 安全性、动力性 典型的乘员舱热舒适性模…

laravel的队列的使用

laravel队列 laravel的特性&#xff1a;laravel队列可以基于不同的后台存储服务提供统一的api&#xff0c;后台存储服务包括 Redis MySQL等。队列实现了业务解耦&#xff0c;异步处理&#xff0c;错误重试的功能。比如调用第三方api&#xff0c;无法保证api的可靠性&#xff0…