【Vue】Vuex-store
创始人
2024-02-21 16:19:17
0

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的数据也会跟着变化。

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



 

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...