十一. vuex模块式开发

一. 定义

vuex是官方提供的一个插件，是适用于在Vue项目开发时使用的状态管理工具，用于集中式管理项目中组件共用的数据。想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

========================================
以上是别人的写的定义，我来说一下我的理解：vuex模块式开发，就相当于将一个存放数据大仓库，分为几个存放数据的小仓库。当然我的理解比较片面，以后理解深入了再修改补充！
注意：vuex适用于项目很大，组件很多，数据很多，数据维护困难的项目。

二. 步骤和举例：

尚品汇18集vuex小例子https://www.yuque.com/u22137022/mxlsc1/nigblz#sOTgF

三. vuex工作原理

b站课程：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=107
讲的太好了！

1. 两个重要api：

dispatch()和commit()
1）dispatch()：在Vue Components环节的组件中调用，需要通过store，例：this.$store.dispatch(参数1，参数2);this是vc对象（组件对象）

• 参数1：Actions环节的函数名，用引号括住。
• 参数2：要传的值，可省略。

2） commit()：在Actions环节的键值对中使用，需要通过store，例：`this.$store.commit(参数1，参数2)；

• 参数1：迷你版的store，统一规定用context做参数（当然也可用其他的）
• 参数2：value，dispatch传的值，dispatch中已传值时，用变量表示即可（当然还有其他情况，我没遇到而已，遇到了再补充！）。

一般dispatch()的参数1和Actions环节的函数名用小写，commit()的参数1和Mutations环节的函数名用大写。

2. “4+1”——五个步骤扮演不同角色：

从Vue Components开始：
1）Vue Components：客人（组件）
2）Actions：服务员（中间人，处理action,可以书写自己的业务逻辑，也可以处理异步。是个对象，里面存放键值对形式。当然可用键值相等，省略键的原则！）
3）Mutations：厨师（修改state的唯一手段，是个对象，里面存放键值对形式。当然可用键值相等，省略键的原则！）
4）State：菜（仓库存储数据的地方）
那Backend API是什么意思？在以上四个角色种，Actions有时很多余，可以跳过这个环节，直接由组件去调用commit()方（直接由客人去和厨师打交道说吃什么）。但是有的时候不行，Backend API是后端api的意思，有时候需要通过Actions环节，让后端提供数据，在这个环节去处理。
5）除了以上四个步骤外，还有一个非常重要的角色——store，仓库的意思，这个是以上4个步骤的前提，由store和vue打交道，先由store作为以上4个步骤的载体，然后让store注册进Vue对象中。store中存放多个api方法供调用（包括dispatch()和commit()）！
再举个例子！
store像个戏台，以上四个步骤在戏台上唱戏！

3. 注意事项

import导入vuex插件和Vue.use(Vuex插件)，写的时候需要注意一下写在哪里？b站老师演示了写在main.js，应该写在store/index.js文件中。
为什么？
看这篇文章最后的那个import注意事项https://blog.csdn.net/HSH541/article/details/123640677?spm=1001.2014.3001.5501

四. vuex开发者工具如何使用？

B站视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=110

1. vuex开发者工具和vue开发者工具是同一个。
2. 从vuex工作原理图可以看出，vuex开发者工具只监视Mutations的环节。
3. 具体骚操作看视频！

五. 1个getters()方法 + 4个map方法的使用

1. getters()方法

语雀文章：https://www.yuque.com/u22137022/okgi2w/iimitz

2. 4个map方法

（1）mapState()方法

https://www.yuque.com/u22137022/okgi2w/up7tt4

（2）mapGetters()方法

https://www.yuque.com/u22137022/okgi2w/up7tt4

（3）mapActons()方法

https://www.yuque.com/u22137022/okgi2w/pnxthh

（4）mapMutations()方法

https://www.yuque.com/u22137022/okgi2w/pnxthh

六. 命名空间namespace

https://www.yuque.com/u22137022/okgi2w/viidoc