【Vue】Vuex-store

news2024/11/29 10:57:40

Vuex是什么?

Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。

 像一个仓库一样!


使用Vuex统一管理状态的好处?

1.能够在vuex中集中管理共享的数据,易于开发和后期维护
2.能够高效地实现组件之间的数据共享,提高开发效率
3.存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步

(一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可。)


核心概念概述

vuex中的主要核心概念如下:

  1. State
  2. Mutation
  3. Action
  4. Getter

 State

State提供唯一的公共数据源,所有共享的数据都要统一放到Store的 State中进行存储。

组件访问State中数据

法一:通过 $store.state.全局数据名称 获取。

法二:按需导入

 对比两种方式:

 


 对于Vuex,不允许直接修改store内的数据。

 

 这就要学到Mutation了

 Mutation

Mutation用于变更Store中的数据。

  • 只能通过 mutation变更Store数据,不可以直接操作Store中的数据。
  • 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化
  • 定义和触发:

 

 (Mutations里面的方法的第一个参数永远是state,可以直接从里面更改数据)

 触发mutations时也可以传递参数:

 commit的作用就算调用某个mutation函数

触发mutations同样有第二种方式,就是按需索取,和按需索取store中变量方法非常类似,把需要用到的方法映射过来即可。

声明之后,直接 this.调过来的方法名字 即可,相当于将该函数定义为了组件中自己的函数。


 在mutations中不可以执行异步操作,如setTimeout(()=>{},).

处理异步任务又要学到Action了

 Action

Action用于处理异步任务。

如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。

 (action里面的方法的第一个参数永远是context,可以直接从里面更改数据)

 dispatch是触发action中的方法,commit是触发mutations中的。

注意:action只负责执行异步操作,如果像修改数据,还是得通过context.commit触发某个mutation才行.

同样,触发action时也可以传递参数:

 触发action同样有第二种方式,就是按需索取,和前两者也是一样的,把需要用到的方法映射过来即可。用的是mapActions


 那么,有时候我们并不想改变store里的数据,只想使用怎么办呢?

这个时候就要学Getter了

 Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据。

  • Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
  • Store中数据发生变化,Getter的数据也会跟着变化。

 也是有两种方式,懒得讲了,前面几个懂了这个就自然一下就明白了



 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

二叉查找树(1)-二叉树-数据结构和算法(Java)

文章目录1 前言1.1 二叉查找树定义1.2 二叉查找树的性质2 基本实现2.1 API2.2 实现代码2.2.1 数据表示2.2.2 查找2.2.3 插入3 分析4 有序性相关方法与删除操作4.1 最大键和最小键4.2 向上取整和向下取整4.2.1 向下取整floor()4.2.2 向上取整ceiling()4.3 选择select()4.4 排名r…

微服务框架 SpringCloud微服务架构 3 Eureka 3.1 提供者与消费者

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式,系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构3 Eureka3.1 提供者与消费者3.1.1 一些概念3.1.2 一个问题3.1.3 总结3 Eur…

【Hack The Box】linux练习-- Pit

HTB 学习笔记 【Hack The Box】linux练习-- Pit 🔥系列专栏:Hack The Box 🎉欢迎关注🔎点赞👍收藏⭐️留言📝 📆首发时间:🌴2022年11月27日🌴 🍭…

单片机如何控制外设?

单片机如何控制外设? 单片机不是直接控制外设的,而是通过配置片上外设寄存器来控制其输出和检测高低电平,进而控制外围器件。 单片机如何配置寄存器的? 下图是单片机驱动 点亮发光二极管 内核从flash里面加载读取指令。内核根据指…

将DataFrame中符合指定条件的数据替换为指定的值:mask()函数

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 将DataFrame中符合指定条件的数据 替换为指定的值:mask()函数 选择题 下列说法错误的是? import pandas as pd myDF pd.DataFrame({"A":[1,2,3], "B":[4,…

java EE初阶 — 如何进行多线程编程

文章目录1.java如何进行多线程编程1.1 最基础的多线程代码1.2 线程的优势2.java中创建线程的方法2.1 继承Thread 重写run2.2 实现Runnable 接口2.3 使用匿名的内部类,继承 Thread2.4 使用匿名类。继承 Runnable2.5 使用 Lambda 表达式(最简答、最推荐&am…

2000-2020年迪博上市公司内部控制指数

2000-2020年迪博上市公司内部控制指数 1、时间:2000-2020年 2、指标包括: 证券代码、证券简称、辖区、证监会行业、申万行业、内部控制指数、报告期 3、指标解释: 上市公司内部控制指数是结合国内上市公司实施内部控制体系的现状&#x…

java——电商购物平台

1.java编译环境的创建,与所需要用到的插件 (1) 选择的编译器为2022版本的intellij idea 首先新建一个空项目 同时,创建完之后,我们点击 文件 -> 项目结构 进入项目结构,点击项目,选择好你想要的jdk版本,若没有,可以在idea中下载,这里我使用openjdk-19, 点击模…

Python适合0基础菜鸟学吗

前言 经常有小伙伴问:Python适合0基础初学编程的人学吗?今天我们就来从Python的功能和特性方面看一下,Python是否能让新人快速上手。 1、非常适合。我觉得刚开始学编程,负担越少越好,应该尽快能做出东西来。刚开始学…

day02 linux常用命令

day02 linux 第一章 Linux常用命令 第一节 进程相关命令 1. 查看进程状态 1.1 命令的使用 ps命令是用于查看进程状态的命令,它常和e参数(对应单词entire,表示全部。具体指显示系统中全部的进程信息。),以及f参数(对应单词full-formate&a…

Node.js 入门教程 13 在 Node.js 中从命令行接收输入

Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录Node.js 入门教程13 在 Node.js 中从命令行接收输入13 在 Node.js 中从命令行接收输入 如何使 Node.js CLI 程序具有交互性? 从…

卡塔尔世界杯--程序员的诗和远方

💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! 卡塔尔世界杯–程序员的诗和远方 2022年卡塔尔世界杯(FIFA World Cup Qatar 2022)第二十二届世界杯足球赛,历史上首次在卡塔尔和中…

【学习笔记44】JavaScript的事件传播

JavaScript的事件传播一、事件传播1、事件传播的说明2、阻止事件传播二、目标冒泡捕获1、冒泡2、捕获三、事件委托1、事件委托的说明2、为什么要用事件委托四、阻止默认事件1、方法一2、方法二一、事件传播 在触发子元素的事件时, 会将行为传播给父级的同类型事件触发了子元素的…

机器学习1综述

文章目录一、综述学习环境:二、机器学习方法的分类1、监督学习;2、非监督学习;3、半监督学习;4、增强学习;三、机器学习方法分类2、批量学习(离线学习)Batch Learing;3、参数学习&am…

二叉树的递归问题

目录 一、相同的树 二、另一棵树的子树 三、翻转二叉树 四、平衡二叉树 五、对称二叉树 一、相同的树 给你两棵二叉树的根节点 p 和 q ,编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是…

【毕业设计-课程设计】-超声波测距

资源链接在文章最后,订阅查看获取全部内容及资料,如需可私信提供硬件。 目 录 1 绪论 2 1.1 项目研究背景及意义 2 2 总体设计方案及论证 2 2.1 总体方案设计 2 3 硬件实现及单元电路设计 3 3.1 主控制模块 3 3.2 电源设计 4 3.3 超声波测试模块 4 3.3.1 超声波的特性 5 3.3…

【Python】顺序、条件、循环语句

文章目录一. 顺序语句二. 条件语句1. 什么是条件语句2. 缩进和代码块3. 空语句 pass4. 练习三. 循环语句1. while 循环2. for 循环一. 顺序语句 默认情况下,Python 的代码执行顺序,是从上到下依次执行的: 执行结果一定为 “123”&#xff0…

【工具门户】Backstage配置使用PostgreSQL(三)

先决条件 If the database is not hosted on the same server as the Backstage app, the PostgreSQL port needs to be accessible (the default is 5432 or 5433) PostgreSQL数据库默认端口为5432或5433,如果数据库与Backstage应用不在同一台机器上,需开放PostgreSQL端口…

MyBatis框架一二级缓存含代码演示

目录 1.什么是缓存? 2. Mybatis的一级缓存 2.1实验一: 2.2实验二: 3.Mybatis的二级缓存 3.1 二级缓存需要配置才可以使用: 3.2 实验开始!! 4.总结 1.什么是缓存? 缓存就是数据交换的缓冲区(称作Cache),当某一…

学习Python中turtle模块的基本用法(2:基本绘图函数测试)

个人感觉turtle模块中的绘图函数是按人手拿着画笔一笔一画地画图的思路定义的,这与C#中的GDI函数、html5中canvas的绘图函数及Tkinter中Canvas的绘图函数的定义思路存在差异,但也能完成后面绝大部分的绘图功能(目前看到的turtle文章及帮助文档…