当前位置: 首页 > news >正文

时隔多年再学习Vuex,什么?原来如此简单!

时隔多年再学习Vuex,什么?原来如此简单!

start

  1. Vue 写了好多年了,少不了和 Vuex 打交道。虽然使用它的次数非常频繁,但是潜意识里总觉得这东西很难,导致遇到与之相关的问题就容易慌张。
  2. 时至今日,升级版新款 “大菠萝” pinia 都已经推出了,我居然还是对 Vuex 掌握不透彻。这不太好吧?
  3. 那么今天就让这个问题,消失在这篇博客吧!
  4. 作者:lazy_tomato
  5. 编写时间:2023/02/16-11/16

官网

Vuex官方文档

上述链接中 Vuex 版本为 3.x,后续讲解的内容均为此版本。

我后续会依托官方文档,讲讲我对 Vuex 的理解。

本文大部分内容均为我个人的理解,难免有些表述不当之处,参考即可

一. Vuex 是什么?

1.Vuex是什么?

在这里插入图片描述

学习一个东西,首先我们要知道这东西是什么,先来看看官方文档对它的说明:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

  • 状态:状态可以理解为data中的数据;

  • 管理:对数据进行管理;

  • 模式:可以理解为是一种解决方案;

所以官方文档的话,可以理解为:

Vuex 是一个专为 Vue.js 应用程序开发管理 data 中数据的一个解决方案?

2.为什么要使用 Vuex ?

在这里插入图片描述

官方文档已经给了我们答案:

  • 多个视图依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
  • 来自不同视图的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

用我自己的理解来表达:

  • 多个组件依赖同一个数据,这就涉及到组件之间的数据传参了,如果组件的层级略微复杂,数据的传递会很痛苦。
  • 多个组件同时变更一个数据,虽然数据是同一个,但是会有很多无用的拷贝。

3. 问题2中的哪些痛点的数据有哪些呢,能列举一下吗?

例如:

  • 一个网页版的后台管理系统,用户的信息,肯定是很多地方都会使用到的,往往,多个组件都会需要读取这个数据。

  • 一个电商的网站,有一个购物车的功能,购物车存储的信息,可能很多组件都会去变更,

4. Vuex 中设计的思想?

在这里插入图片描述

Vuex 背后的基本思想,借鉴了 Flux 、Redux和 The Elm Architecture。

这句话介绍了 Vuex 借鉴的思想来源于哪里

Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

这里介绍了 Vuex 区别于其他库,有哪些特点:更贴合 Vue.js 的细粒度数据响应机制。(Vue响应式的颗粒度精确到对象上每一个属性的变化)

把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

  • 原话是一个反问句,我适当调整了一下,调整成了陈述句。陈述句阅读起来,给人很直爽的感觉。

  • 核心思想:把共享的数据抽离出来,以全局单例模式管理。

5.什么是单例模式?

要是换做以前,可能这段内容我就跳过了。但是最近刚好学习了设计模式,又刚好学习了单例模式,这里我就讲讲我的理解。

5.1 一般的情况下,我们有一个类,我们可以通过 new 关键词,基于这个类创建多个实例。

例如:

class Tomato {constructor(name) {this.name = name}
}var t1 = new Tomato('红色的番茄')
var t2 = new Tomato('橙色的番茄')console.log(t1)
// { name: '红色的番茄' }console.log(t2)
// { name: '橙色的番茄' }

5.2 单例模式的概念

保证一个类仅有一个实例,并提供一个访问它的全局访问点,这样的模式就叫做单例模式。

我的理解:一个类只能有一个实例

5.3 为什么要用单例模式?

举个例子:

假如,我一个项目组有好几个人。

我在项目搭建的时候,我引入了 Vuex,做状态管理。

然后我通过 const A = new Vuex() ,创建了一个对象A。我所有的共享数据,都存储在这个对象A中。

当然 new Vuex 只是举例,后续会讲到它的真实用法。

如果其他的小伙伴不知情,也通过 ``const B = new Vuex()` 创建了实例B 。那我想读取和存储共享的数据,到底存储在A还是B呢?

所以这就必须要引入一个 单例模式 的概念。

5.4 如何实现单例模式?

我在编写这篇文章的时候,下载的 Vuex版本是 4.0,找了很久找不到对应代码了。

**请注意,本文讲解的逻辑主要针对 3.x ** 下方源码对应 Github 地址 ,点击这里

// vuex/src/store.js
function install (_Vue) {//  判断传入的Vue实例对象是否已经被install过Vuex插件(是否有了唯一的state)if (Vue && _Vue === Vue) {if ((process.env.NODE_ENV !== 'production')) {console.error('[vuex] already installed. Vue.use(Vuex) should be called only once.');}return}Vue = _Vue;applyMixin(Vue);
}

自己实现一个 单例模式:

class SingleDog {show() {console.log('我是一个单例对象')}static getInstance() {// 判断是否已经new过1个实例if (!SingleDog.instance) {// 若这个唯一的实例不存在,那么先创建它SingleDog.instance = new SingleDog()}// 如果这个唯一的实例已经存在,则直接返回return SingleDog.instance}
}const s1 = SingleDog.getInstance()
const s2 = SingleDog.getInstance()// true
s1 === s2

好了,说远了,回归到正题。


二. Vuex 如何使用?

1. 安装

npm install vuex --save

2. 引入

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}}
})new Vue({el: '#app',store: store, // 这样我们可以
})

Store 英文释义: 仓库

主要的用法:

  1. Vue.use(Vuex)Vuex 中绑定 vue 实例。
  2. 基于 Vuex.Storenew 出一个实例 store
  3. new Vue 的配置对象中,传入 store。方便全局直接 this.$store 使用。

3. state

new Vuex.Store() 中传入的配置项,主要有五个属性。

  1. state 状态
  2. mutations 改变
  3. actions 行动
  4. getters 获得
  5. modules 模块

首先,Vuex 主要是用来管理数据,所以必须要有一个位置可以存储数据。这个位置就是 state。使用时结合计算属性 computed 选项使用。

// 注册:
const store = new Vuex.Store({state: {count: 0},
})// 在组件中使用
const Counter = {template: `<div>{{ count }}</div>`,computed: {count () {return store.state.count}}
}

当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键:

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'export default {// ...computed: mapState({// 箭头函数可使代码更简练count: state => state.count,// 传字符串参数 'count' 等同于 `state => state.count`countAlias: 'count',// 为了能够使用 `this` 获取局部状态,必须使用常规函数countPlusLocalState (state) {return state.count + this.localCount}})
}

在这里插入图片描述

4. mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

同步修改 state 的数据,在 mutations 中定义方法,外部调用这个方法,触发修改。

const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 变更状态state.count++}}
})// 触发更改
store.commit('increment')

5. action

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}},actions: {increment (context) {context.commit('increment')}}
})

6. getters

Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)}}
})store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

7. modules

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

const moduleA = {state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}const moduleB = {state: () => ({ ... }),mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {a: moduleA,b: moduleB}
})store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态// 使用:
store.state.a.xxx

三.思考

截止到这里,对Vuex的基础使用,算是基本掌握了。

记录一下我自己的思考。

  1. 使用Vuex的目的:解决多个组件依赖,多个组件需要修改的数据,共享的问题。
  2. 同步修改,使用 commit的方式,触发 mutation;
  3. 异步修改,使用 dispatch的方式,触发 action;
  4. getters 相当于过滤器,用于处理数据格式。
  5. modules 用于将一个大的 state,拆分多个模块。访问的时候,中间穿插模块名。

也没什么好恐怖的,其实很简单,简单来说,就是一个全局单例的一个对象,存储我们频繁使用的需要共享的数据。

相关文章:

时隔多年再学习Vuex,什么?原来如此简单!

时隔多年再学习Vuex&#xff0c;什么&#xff1f;原来如此简单! start 写 Vue 写了好多年了&#xff0c;少不了和 Vuex 打交道。虽然使用它的次数非常频繁&#xff0c;但是潜意识里总觉得这东西很难&#xff0c;导致遇到与之相关的问题就容易慌张。时至今日&#xff0c;升级版…...

Linux笔记_gcc

Linux_gcc程序的翻译链接库make与makefile关于gcc的一些笔记。 程序的翻译 gcc/g是一个编译器。 预处理&#xff1a;头文件展开、条件编译、宏替换、去注释 编译&#xff1a;C语言汇编语言 汇编&#xff1a;汇编->可重定位目标二进制文件&#xff0c;不可以被执行&#xff0…...

2023美赛MCM A题 详细思路

2023美赛(MCM/ICM)如期开赛&#xff0c;为了尽早的帮大家确定选题。这里我们加急为大家编辑出A赛题详细思路&#xff0c;方便大家快速对A题目的难度有个大致的了解。同时&#xff0c;我们也给出了A题目简要的解题思路&#xff0c;以及该问题在实际解决中可能会遇到的难点。A题的…...

c#: NetTopologySuite凹凸多边形计算

环境&#xff1a; .net 6.0NetTopologySuite 2.5.0vs2022平面二维 一、夹角计算 1.1 计算向量与x轴正方向的夹角 方法: AngleUtility.Angle(Coordinate p) 下图上的t2即为p&#xff0c;之所以这么写是为了和AngleUtility.AngleBetweenOriented做比较 注意&#xff1a; 结果…...

NFT Insider #86:A16z 领投,YGG 获得 1380 万美元融资,The Sandbox与《北斗神拳》合作

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members、BeepCrypto联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周报将从NFT市场数据&#xff0c;艺术新闻类&#xff0c;游戏新闻类&#xff0c;虚拟世界类&#…...

Sort_Algorithm

排序算法前言插入排序折半插入排序希尔排序冒泡排序快速排序选择排序堆排序归并排序前言 排序算法&#xff1a;将一堆数据元素按关键字递增或者递减的顺序&#xff0c;进行排序。 排序算法的评价指标&#xff1a;时间复杂度&#xff0c;空间复杂度&#xff0c;算法稳定性。 算…...

【初探人工智能】2、雏形开始长成

【初探人工智能】2、雏形开始长成【初探人工智能】2、雏形开始长成安装Flask封装Web接口雏形设置接收参数功能验证聊天写代码代码补全生成图片写在后面笔者初次接触人工智能领域&#xff0c;文章中错误的地方还望各位大佬指正&#xff01; 【初探人工智能】2、雏形开始长成 在…...

【LeetCode】剑指 Offer(2)

目录 写在前面&#xff1a; 题目&#xff1a; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 写在前面&#xff1a; 今天的每日一题好难&#xff0c;我不会dp啊啊啊啊啊啊。 所以&am…...

【JavaSE】Lambda、Stream(659~686)

659.每天一考 1.写出获取Class实例的三种常见方式 Class clazz1 String.class; Class clazz2 person.getClass(); //sout(person); //xxx.yyy.zzz.Person... Class clazz3 Class.forName(String classPath);//体现反射的动态性2.谈谈你对Class类的理解 Class实例对应着加载…...

有限差法(Finite Difference)求梯度和Hessian Matrix(海森矩阵)的python实现

数学参考 有限差方法求导&#xff0c;Finite Difference Approximations of Derivatives&#xff0c;是数值计算中常用的求导方法。数学上也比较简单易用。本文主要针对的是向量值函数&#xff0c;也就是f(x):Rn→Rf(x):\mathbb{R^n}\rightarrow \mathbb{R}f(x):Rn→R当然&…...

day33 贪心算法 | 1005、K次取反后最大化的数组和 134、加油站 135、分发糖果

题目 1005、K次取反后最大化的数组和 给定一个整数数组 A&#xff0c;我们只能用以下方法修改该数组&#xff1a;我们选择某个索引 i 并将 A[i] 替换为 -A[i]&#xff0c;然后总共重复这个过程 K 次。&#xff08;我们可以多次选择同一个索引 i。&#xff09; 以这种方式修改…...

《蓝桥杯每日一题》递推·AcWing 3777. 砖块

1.题目描述n 个砖块排成一排&#xff0c;从左到右编号依次为 1∼n。每个砖块要么是黑色的&#xff0c;要么是白色的。现在你可以进行以下操作若干次&#xff08;可以是 0 次&#xff09;&#xff1a;选择两个相邻的砖块&#xff0c;反转它们的颜色。&#xff08;黑变白&#xf…...

mysql读写分离(maxscale)

1. 环境架构 需要三台服务器。192.168.2.10&#xff08;master&#xff09;192.168.2.20&#xff08;slave&#xff09;192.168.2.30&#xff08;maxscale&#xff09; 2. 部署mysql主从同步 mysql主从同步可以参考mysql主从同步 3. 部署maxscale服务 MaxScale中间件软件 …...

第八章 - 数据分组( group by , having , select语句顺序)

第八章 - 数据分组 group by数据分组过滤分组 having分组排序groub by语句的一些规定select语句顺序数据分组 在使用group by进行分组时&#xff0c;一般都会配合聚合函数一起使用&#xff0c;实现统计数据的功能。比如下面例子&#xff0c;需要按性别计算人数。按性别进行分组…...

Git(GitHub,Gitee 码云,GitLab)详细讲解

目录第一章 Git 概述1.1 何为版本控制1.2 为什么需要版本控制1.3 版本控制工具1.4 Git 简史1.5 Git 工作机制1.6 Git 和代码托管中心第二章 Git 安装第三章 Git 常用命令3.1 设置用户签名3.2 初始化本地库3.3 查看本地库状态3.3.1 首次查看&#xff08;工作区没有任何文件&…...

策略模式(Strategy Pattern)

编写鸭子项目&#xff0c;具体要求如下&#xff1a; 1&#xff09; 有各种鸭子&#xff08;比如 野鸭、北京鸭&#xff0c;水鸭等&#xff0c;鸭子有各种行为&#xff0c;比如 叫&#xff0c;飞行等&#xff09; 2&#xff09;显示鸭子的信息 传统方案解决鸭子问题 1&#xff0…...

《Qt6开发及实例》6-2 Qt6基础图形的绘制

目录 一、绘图框架设计 二、绘图区的实现 2.1 PaintArea类 2.2 PaintArea类讲解 三、主窗口的实现 3.1 MainWidget类 3.2 MainWidget类讲解 3.3 槽函数编写 3.5 其他内容 一、绘图框架设计 界面 两个类 ​ 二、绘图区的实现 2.1 PaintArea类 ​paintarea.h #ifndef…...

LeetCode 382. 链表随机节点

原题链接 难度&#xff1a;middle\color{orange}{middle}middle 题目描述 给你一个单链表&#xff0c;随机选择链表的一个节点&#xff0c;并返回相应的节点值。每个节点 被选中的概率一样 。 实现 SolutionSolutionSolution 类&#xff1a; Solution(ListNodehead)Solution…...

iOS开发AppleDeveloper中给别人授权开发者权限后,对方一直显示不了我的开发账号team

在iOS开发经常出现多人协作开发的情况。这时我们通常要发邮件邀请别的用户为开发者或者app管理就可以开发我们自己的项目了。但是这次我给别人授权开发者权限后&#xff0c;发现别人权限中没有证书相关权限如图&#xff1a;并且别人登录该账号后&#xff0c;在xcode中只有一个看…...

FreeRTOS数据类型和编程规范

目录 数据类型 变量名 函数名 宏的名 数据类型 每个移植的版本都含有自己的portmacro.h头文件&#xff0c;里面定义了2个数据类型 TickType_t FreeRTOS配置了一个周期性的时钟中断&#xff1a;Tick Interrupt每发生一次中断&#xff0c;中断次数累加&#xff0c;这被称为t…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...