5 Vuex

5.1 vuex概述

vuex是实现数据集中式状态管理的插件。数据由vuex统一管理。其它组件都去使用vuex中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。一定要注意：全局事件总线和vuex插件的区别：
1. 全局事件总线关注点：组件和组件之间数据如何传递，一个绑定 $o n ，一个触发$ emit。数据实际上还是在局部的组件当中，并没有真正的让数据共享。只是数据传来传去。

vuex插件的关注点：共享数据本身就在vuex上。其中任何一个组件去操作这个数据，其它组件都会同步更新。是真正意义的数据共享。

使用vuex的场景是：
1. 多个组件之间依赖于同一状态。来自不同组件的行为需要变更同一状态。

5.2 vuex环境搭建

安装vuex
1. vue2安装vuex3版本
  1. npm i vuex@3
2. vue3安装vuex4版本
  1. npm i vuex@4
创建目录和js文件（目录和文件名不是必须叫这个）
1. 目录：vuex
2. js文件：store.js
在store.js文件中创建核心store对象，并暴露

在main.js文件中关联store，这一步很重要，完成这一步之后，所有的vm和vc对象上会多一个$store属性

5.3 vuex实现一个最简单的案例

使用vuex实现一个点我加1的简单功能。

为什么这么折腾呢？
1. 通过以上案例，可以看出数据num可以被多个组件共享。(vuex可以管理多个组件共享的数据)
2. 通过 $o n 和$ emit这种全局事件总线不好吗？可以。但如果组件多的话，并且涉及到读和写的操作会导致混乱。
actions中的回调函数，参数context
1. 如果业务逻辑非常负责，需要多个actions中的方法联合起来才能完成，可以在回调函数中使用context继续调用dispatch方法触发下一个action方法的执行。

5.4 vuex工作原理

如果业务逻辑非常简单，也不需要发送AJAX请求的话，可以不调用dispatch方法，直接调用commit方法也是可以的。

5.5 多组件数据共享

实现以下案例：

5.6 getters配置项

如果想将state中的数据进行加工计算，并且这个计算逻辑复杂，而且要在多个位置使用，建议使用getters配置项。
怎么用？
3. 类似于Vue当中的：data和computed的关系。

5.7 mapState和mapGetters的使用（优化计算属性）

组件中在使用state上的数据和getters上的数据时，都有固定的前缀：

{ {**this. $KaTeX parse error: Expected 'EOF', got '}' at position 19: \dotsre.state.**name}̲} {{**this.$ store.getters.**reverseName}}
使用mapState和mapGetters进行名称映射，可以简化以上的写法。

使用mapState和mapGetters的前提是先引入
1. import {mapState, mapGetters} from ‘vuex’
mapState如何使用，在computed当中使用ES6的语法
1. 第一种方式：对象形式
  1. …mapState({name:’name’})
2. 第二种方式：数组形式
  1. …mapState([‘name’])
3. 插值语法就可以修改为：{ {name}}
mapGetters如何使用，在computed当中使用ES6的语法
1. 第一种方式：对象形式
  1. …mapGetters({reverseName:’reverseName’})
2. 第二种方式：数组形式
  1. …mapGetters([‘reverseName’])
3. 插值语法就可以修改为：{ {reverseName}}

5.8 mapMutations和mapActions的使用（优化methods）

import {mapMutations, mapActions} from ‘vuex’
methods : {
// 对象写法
…mapActions({add:’plusOne’,reverseName:’reverseName’})
// 数组写法（前提是：保证methods中的方法名和actions中的方法名一致）
…mapActions([‘plusOne’, ‘reverseName’])
}