Vuex

136 阅读1分钟

1. Vuex 是什么

 Vuex 是 vue 项目中实现大范围数据共享的技术方案。
 作用:能够方便、高效地实现组件之间的数据共享。

2.使用 Vuex 的好处

① 数据的存取一步到位,不需层层传递
② 数据的流动非常清晰
③ 存储在 Vuex 中的数据都是响应式的

3.State 的基本使用

概念:State 本质上就是 Object 对象
作用:用来存储全局共享的数据

4.安装 Vuex 的步骤:

 1.在cmd黑窗口输入yarn创建node_modules依赖包
 2.在cmd黑窗口输入yarn serve
 3.在终端输入yarn add vuex@3.6.2

5.封装 Store 模块

image.png

6.把 Store 实例挂载到 Vue 实例上

image.png

7.组件访问 State 数据的第一种方式
在每个 Vue 组件中,可以通过 this.$store.state.全局数据名称 访问 Store 中的数据

image.png

image.png

image.png

8.组件访问 State 数据的第二种方式
基于 Vuex 提供的 mapState 辅助函数,可以方便的把 Store 中指定的数据,映射为当前组件的计算属性:

image.png

image.png

image.png

9.组件访问 State 数据的第二种方式,拿到两种数值

image.png

image.png

10.mapState 辅助函数的原理

image.png

image.png

11.Mutation 的基本使用

Mutation 本质上是 JavaScript 函数,专门用来变更 Store 中的数据。

image.png

 特点:想要修改 State 中的数据,只能调用 Mutation 方法!
 好处:能够确保修改来源的唯一性,方便调试和后期维护

State、组件、Mutation 之间的关系

image.png

image.png

12.Mutation的基本流程:

image.png

13.Mutation第一种方法:

image.png

image.png

mutation 方法的第一个形参是state 对象
在组件中怎样调用 mutation 方法this.$store.commit('方法名')

14.载荷(Payload)

image.png

提交载荷(Payload)

image.png

15.在组件里面访问mutation的第二种方法

image.png

image.png