标签：Vue Vuex js reverseName 使用组件 vuex 老杜 store

Vue.js是一个渐进式 MVVM 框架，目前被广泛使用，也成为前端中最火爆的框架

Vue可以按照实际需要逐步进阶使用更多特性，也是前端的必备技能

动力节点老杜的Vue2+3全家桶教程已经上线咯！

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

视频将从Vue2开始讲解，一步一个案例，知识点由浅入深，然后很自然的过度到Vue3版本。

每一个Vue的知识点讲解的非常通透，不但举例告诉你怎么用，还会告诉你底层实现原理。

5 Vuex

5.1 vuex概述

vuex是实现数据集中式状态管理的插件。数据由vuex统一管理。其它组件都去使用vuex中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。一定要注意：全局事件总线和vuex插件的区别：
1. 全局事件总线关注点：组件和组件之间数据如何传递，一个绑定$on，一个触发$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. 通过$on和$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.$store.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’])
}