vuex使用方法

---

一、一个简单的demo

1、创建vue项目npm install - global vue-cli && vue init webpack projectName

2、然后需要引入vuex，利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。npm install vuex --save

需要注意的是这里一定要加上 --save，因为你这个包我们在生产环境中是要使用的。
3、新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。引入之后用Vue.use进行引用，使用vuex。

4、我们这个小案例先声明一个state的count状态，在页面中使用显示这个count，然后可以利用按钮进行加减

并将store导出（导出方式有点不一样），让外部可以用

5、新建一个vue的模板，位置在components文件夹下，名字叫count.vue。在模板中我们引入我们刚建的store.js文件，还需要在export中加入store:store，并在模板中用$store.state.count输出count 的值，count的初始值为1；

6、在store.js里面声明两个方法，用来加减count，这些方法必须要写在mutations里面，然后将mutations与state一起导出。

7、最后在count.vue中加入两个按钮，并调用mutations中的方法就可以了

目录结构：

效果：注意需要在router中配置路由才可以访问

初始为1，点击+ -数值会对应增加减少

二、mapState访问仓库state状态对象

我们之前访问数据仓库的state对象时都是通过 $store.state.count 访问的，很长也不好看，我们可以通过计算属性先对要输出的值count进行改变，然后直接写count就可以了，有三种方法。

1、直接通过计算属性return this.$store.state.count
2、方法二和方法三也是写在计算属性中，需要从vuex中引入mapState，我们常用第三种，最简单，代码量最少

都可以正常实现之前的功能

三、Mutations修改状态

之前都是加一，我要是想一次加5怎么办呢，这需要传值；
1、修改mutations里面的add方法，让它可以接收一个值，让count在现在的基础上加上接收到的值。

2、在Count.vue里修改按钮的commit( )方法传递的参数，我们传递5，意思就是每次加5。这样就实现了每次加5，减1。

我们也不喜欢看到 @click="$store.commit(‘add’,5)" 点击函数这样写，这样有点不和编程思想，希望变成 @click=“add(5)” 这样，和引用数据仓库中的state一样，方法可以通过mapMutations来简化，只不过前者写在计算属性中，后者写在方法中。

1、引入mapMutations，然后和mapState用法一样，只不过后者放在methods中。

效果：刷新后分别点击+ -，

四、getters计算过滤操作

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。这里再做一个功能，让每次数据仓库中的count改变的时候再通过getter加10；

1、先在store.js中声明一个常量getters，与mutations一样，为固定写法，名字不能改变为其它的。然后给count赋值，赋值形式为一个函数的return部分。

2、 然后用法与mapState一样，先从vuex中引入mapGetters，然后在计算属性中写入mapGetters，里面写入相应的重新计算的数据仓库中的值，这样就成功调用了数据仓库中的getters方法，调用过程与mapState一样。

效果：原本初始值为1，但是调用了getters方法，默认加10，所以刷新最初开始时就是1+10=11，现在每次点击加号的时候就会加5再加10，点击减号的时候就会先减1再加10。

五、actions异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。

1、在store.js中声明actions， actions是可以调用Mutations里的方法的；在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。两个方法传递的参数也不一样。

context：上下文对象，这里你可以理解称store本身。
{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
下面除了给了一个context外，还给了一个num ，这个num是在调用addAction时传过来的参数，然后再把这个参数传给mutations中的add方法。

2、在count.vue模板中编写代码，先复制两个以前有的按钮，并改成我们的actions里的方法名，分别是：addAction和reduceAction。然后再从vuex中引入mapActions，用法与mapMutations一样，写在methods里面，并且将需要调用的方法名写在数组中。

效果：这里就有两个加号和减号了，上面的加5，下面的加10，分别点击上下的加号



不了解的可以去这里(有视频教程)：https://jspang.com/detailed?id=27 ，