一.理解vuex

1.vuex是什么

我们以前要实现各个组件间通信，是不是全局事件总线，我们以前都是拿来读这个数据然后对他进行操作，其实没有考虑到写去改这个数据，如果要改A里面的数据，那么A就要绑定一个自定义事件，接受别个组件发回来的数据，然后在A里面修改，vuex我个人而言哈还是挺方便的，但却是看起来这张图有点复杂了

2.求和案例（普通版）

v-model专用的三个修饰符用起来，一个number、一个trim、一个lazy（失去焦点在获取数据）

3.vuex工作原理图

vuex是由三个重要部分组成，actions、mutations、state。我们说要把数据交給vuex进行管理其实就是交给state对象进行存储，它是一个对象，这三个部分其实都是对象，当我们把我们要管理的数据放到state里面后，就把视线看到vc实例这里，我们把数据交给vuex了，但是这个时候我们的vc要开始事件了，这个时候没有数据因为你把数据给到vuex了，想要拿到数据就得遵守它的规则。

我们的actions，可能你会觉得有点多余，因为就是一个提交的功能，可以看到它上面有一个api，这是api服务器的意思，如果当我们传进来的值不确定需要ajax拿服务器过来的值，这个时候就要用到actions了，只能在这里发起请求。当然如果你实在没有ajax请求，也没有一些业务逻辑，其实可以省略这一步的，后面也会说。

其实还有一个store的api，他负责管理这三个部分，包括我们的dispatch、commit等api都是他的，所以所有的前提都是要先配置好store

二.vuex核心概念及api

1.搭建vuex开发环境

如果是这样你会发现报错，让你要先use注册再导入store，但是你会发现把import这句放到use下面还是会报错

2.求和案例（vuex版）

给我们的数据丢进state里面

dispatch这个api将我们的函数和要传进去的参数值发进去

action这个对象里面定义的函数，会受到两个值，第一个值相当于迷你版store里面有commit、dispatch等方法，第二个值就是我们传进来参数，直接commit给mutation去处理，这里我们给mutation的函数可以跟这里的一样，但是为了做一个区分一般改成全大写
mutation处理对象这里也会收到两个参数，第一个是我们state对象，第二个是我们传进来的值，所以要怎么处理，操作的逻辑一般都写在这里了
完善点一

完善点二

3.vuex开发者工具

需要注意的是之前一直用的最新版本6.14，这个版本属实不知道怎么用，可能只拿来支持vue3.0的，其实在谷歌商店下载对应的5.x版本就可以了

4.context

5.getters配置项

store全新配置项

你可以直接写在vue语法里面，但是写在这里面的话，如果你要一大堆的算法那就不符合风格了这里

所以这个时候就需要getters了

定义在store里面，定义完了还要通过store暴露出去，一个对象里面写函数接受一个参数state，跟computed一样返回值就是函数的值

6.mapState和mapGetters

6.1mapstate

对象写法：很明显这是为了引出那个东西，这样写也太繁琐了，vue确实给我们提供了能够把操作化简的东西，一个函数里面传一个对象以键值对的方式给我们要取的名字和我们数据在state中的名字进行组合，不同再写前面的路径了，因为本来就是在state里面去找，它自动生成的就是一个个函数，所以一般是放在计算属性里面，而且采用es6语法把对象包着的这些函数打开

注意导入的时候怎么导入的

我们对象其实属性和值都应该是加引号的，只是有些时候属性可以省略，值如果是这里可以找到这个变量就可以不加引号

数组写法：当我们属性和值一样的时候，简写形式是针对于后面是一个变量不是字符串的时候，这里不能用简写，但是如果真的属性和值是一样的那么这里可以采取数组写法来简写

6.2mapGetters

7.mapActions和mapMutations

7.1mapMutations

然后要注意一下这里的参数怎么传进来，他其实就是帮我创建了像上面addition这样的函数，只不过我们自己写，是可以写参数的，而他这种方法，你没有写参数，我们都知道事件函数，不写参数默认就是e这个事件对象，

7.2mapActions

8.多组件共享数据

9.vuex模块化+namespace

store也模块化一下，分个类让我们能够更清晰一点，就目前来说，我们做了一个求和案例，一个人员管理案例，所以大体上可以分为两类，像这样创建两个对象，每一个模块都有自己的state、mutations、actions等

computed

经过我们这样一模块化，那么我们的state里面就没有刚才看到的那么直接的数据了，现在的$store的state里面就只有这两个对象了，而对象里面才是state里面的数据，所以我们要这样使用map了，这里为什么能简写，因为state里面就是这个我们取的名字也是这个

那有没有简便方法，因为毕竟这么写，不太符合vue的规则，说了vue语法里面要简洁，是有的。

但是这样写必须有个前提，就是我们store文件模块化里面必须添加一个配置项

methods，我们的actions和mutations这两个节点同时也要改

以上都是简便方法模块化怎么来写，下面说一下原来的纯手写怎么来导入我们的模块化

对象.的形式不允许出线/符号
模块再模块
最后一条线，就是我们在actions怎么来发起ajax请求

编程笔记 » vue - vuex是什么

vue - vuex是什么