Vue笔记（Vuex全局状态管理器）

Posted 2023-03-15

参考技术A

全局状态管理器，可以在项目的任何一个组件中去获取和修改，修改可以得到全局响应的变量

vue-cli2 项目中安装vuex，使用 npm install vuex --save

安装成功后，在src目录下新建一个store文件,里面创建一个js文件

在js文件中写入：

然后在main.js文件中引入 store 并注册到 vue 实例中

vuex的文件配置到这里就完成了

现在再回去看store文件里的参数，这几个对象就是vuex五大核心：

State ：可全局访问的对象
Getter ：和vue的computed一样，用来实时监听state的值的变化（最新状态）
Mutation ：存放改变state值的方法（同步）
Action ：触发mutations里面的方法（异步）
module ：模块

State是存储在Vuex中的数据对象，和Vue实例中的data一样。只不过State是可以全局访问的。

定义stata对象，直接在 state 里面定义 key:val ，它可以定义任意数据类型

在页面中获取state的值 使用 this.$store.state

在这里 state 通常都是挂载到 computed 计算属性上，这样当state的值发生改变的时候都能及时的响应。
当然也能用到 watch 去监听

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

输出

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

Getter的作用就是用来实时监听state的值的变化

定义Geters对象
使用 state 作为其第一个参数
可以使用其他 getter 函数作为第二个参数

在页面中使用getters，使用 this.$store.getters

Getters中的辅助函数 mapGetters
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

输出

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

使用 state 作为第一个参数

使用 this.$store.commit(\'方法名\') 触发mutations中的方法

输出

而第二参数官方解释叫 提交载荷（Payload）
可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

简单来说就是可以在在第二参数里传入额外的参数

这里还是用name来做例子

输出

在 Vuex 中，mutation 必须是同步函数

Action 可以包含任意异步操作，Action的作用就是异步触发Mutations

定义action对象
接收一个 context 参数和一个要变化的形参
context 与 store 实例具有相同的方法和属性，所以他可以执行 context.commit("") ，也可以使用 context.state 和 context.getters 来获取 state 和 getters 。

使用 this.$store.dispatch("方法名") 方法执行Actions

输出

同样Action还支持载荷方法，传入第二形参

输出

其中 module 的作用是可以把 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

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

简单来说就是可以把vuex模块化