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 模块

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

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



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



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


10.mapState 辅助函数的原理


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

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


12.Mutation的基本流程:

13.Mutation第一种方法:


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

提交载荷(Payload)

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

