动力节点Vue笔记第五章vuex

5 Vuex

5.1 vuex概述

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

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

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

5.2 vuex环境搭建

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

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

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

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

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

5.4 vuex工作原理

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

5.5 多组件数据共享

实现以下案例：

5.6 getters配置项

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

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

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

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

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

5.9 vuex的模块化开发

5.9.1 未使用mapXxxx的模块化开发

a模块

b模块

c模块

在store.js文件中引入各个模块

A组件

b组件

将A组件和B组件在App组件中注册

5.9.2 使用mapXxxx的模块化开发

a模块

b模块

在store.js中引入a和b模块

A组件

B组件

在APP组件中注册A和B组件

当然，在action中也可以发送AJAX请求：