Vuex的使用

1、什么是Vuex？

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便实现组件之间的数据共享
状态：就是Vue组件中data里面的属性，我们也将叫做数据。
管理：就是就是对于项目中数据的操作管理。

2、安装（vue-cli在安装时若勾选了vuex，则无需安装）

npm i vuex -S

3、配置

（1）先在src目录下创建store目录，然后配置

（2）在main.js中引入

4、store中的核心概念

• State： 包含了store中存储的各个状态。
• Getters： 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。
• Mutation： 一组方法，是改变store中状态的执行者，只能是同步操作。
• Action： 一组方法，其中可以包含异步操作。
• Moudule： Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

5、使用方法

（1）state属性是 vuex 管理的状态对象，里面会包含一些具体的状态，也即通用的数据

在需要使用的页面加入 $store.state变量

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

mutations携带参：
1）字符串形式提交

2）对象形式提交

注意：如果mutation是一个异步函数，那么devtools不能跟踪数据的变化）

（3）Action 类似于 Mutation，不同的是：

• Action提交的是mutation，而不是直接变更状态
• Action可以包含任何异步操作。在vuex的使用过程中，我们可以将多个Mutation合并到一个Action中，也可以通过Action进行异步操作

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit
提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和getters。Action 通过 store.dispatch 方法触发

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

Getter 接受 state 作为其第一个参数，可以对 state 中的数据做相应的处理，最终返回想要的数据

getter传参，根据不同条件显示

6、辅助函数

Vuex提供了四个辅助函数，分别是mapState、mapGetters、mapMutations、mapActions。在Vuex中获取数据的辅助函数有两个mapState、mapGetters,操作Mutation和Actiond的函数mapMutations、mapActions。

（1）mapState



注意：当组件本生有自己的计算属性时，可使用展开符

运行结果：

（2）mapGetters


（3）mapMutations

① 不传参

② 传参

（4）mapActions（写法可参考mapMutations）

7、Module

• Vue使用单一状态树，那么也意味着很多状态都会交给Vuex来管理
• 当应用变得非常复杂时，store对象就有可能变得相当臃肿
• 为了解决这个问题，Vuex允许我们将store分割成模块（Module），而每个模块拥有自己的state、mutations、actions、getters等
  
  
  
  即$store.state.模块名称.属性名等