动力节点老杜最新版Vue实战教程（5）Vuex

动力节点老杜全新版Vue教程笔记分享给大家

学习の地止：https://www.bilibili.com/video/BV17h41137i4

• 视频教程从Vue2开始讲解，一步一个案例，知识点由浅入深，然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。
• 视频中会把每一个Vue的知识点讲解的非常通透，不但举例告诉你怎么用，还会告诉你底层实现原理。
• 例如：Vue的数据代理机制底层实现原理是什么？本套视频中会从零手写一个Vue的数据代理机制，都是源码级的讲解。

5 Vuex

5.1 vuex概述

1. vuex是实现数据集中式状态管理的插件。数据由vuex统一管理。其它组件都去使用vuex中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。一定要注意：全局事件总线和vuex插件的区别：

1. 全局事件总线关注点：组件和组件之间数据如何传递，一个绑定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. 通过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. 类似于Vue当中的：data和computed的关系。

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

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

{{**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请求：