Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

image.png

1.State --- 驱动应用的数据源(存储着需要管理的组件的状态)

（1）组件内部通过 this.$store.state.loginState 拿到登陆状态
（2）组件内部通过 计算属性 结合 mapState 辅助函数拿到组件状态
在需要使用状态的组件内部通过mapState辅助函数获取：

第一步
第二步
第三步

2.Getter --- 可以看作是state的计算属性，类似于组件中的data与computed

tip：getters可以不用，在组件内部写一个关于state的计算属性
（1）组件内部通过 this.$store.getters.len 拿到getter对应的状态
（2）组件内部通过 计算属性 结合 mapGetters 辅助函数拿到getter对应的状态
通过mapGetters辅助函数获取：

第一步
第二步
第三步
此时可以this.len使用len的值，在template中{{ len }}使用

3.Mutation --- 更改 Vuex 的store中的状态的唯一方法是提交mutation（同步函数）

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

store.js
需更改状态的组件

用常量代替mutation的函数名

创建一个mutation-types.js文件，定义一个常量暴露出去
在store.js中引入这个常量
另一种引入方式：
引入全部的常量
引入全部的常量的这个方式，使用的时候：types.CHANGE_LOGIN_STATE 将函数名改为常量
在登录页面，先引入这个常量（和store.js中引入方法相同），然后把函数名替换掉

用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做

4.Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

4.1异步操作在组件内部

store.js中添加kindlist的状态以及添加修改的mutation

store.js
kind.vue
数据渲染到页面
总结：状态管理器中添加kindlist的状态，添加mutation来改变kindlist的状态，在组件内部将请求到的数据提交到mutation，从而储存在kindlist中，然后通过mapState辅助函数拿到更新后的kindlist，最后渲染到页面

4.2异步操作交给状态管理器去处理

（1）在actions中定义一个函数，将之前在组件中的异步操作放到函数中：

store.js

（2）在组件中触发actions

kind.vue

5.module模块组

随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。

5.1声明模块组：
在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下:

const moduleA={
    state,mutations,getters,actions
}

声明好后，我们需要修改原来 Vuex.Stroe里的值：

export default new Vuex.Store({
    modules:{a:moduleA}
})

5.2在组件中使用：

<span>{{ $store.state.a.loginState}}</span>

个人理解至此实现了：
vue components通过dispatch触发actions，actions提交commit到mutations，mutations更改state的状态，state中的状态通过组件vue components渲染到页面!

tips：为什么要使用状态管理器 --- 方便各个组件间的传值！