关于vuex中对state mutation actions 的认识以及调用

1. 首先，我们要知道vuex是用来解决组件间的状态管理，可以管理复杂应用的数据状态，比如兄弟间组件的通信，多层嵌套组件通信的传值等。

2. 了解了vuex之后，我们先来创建一个脚手架，用vue2来做，在 创建时选择vuex，如图：

   

3. 下载好依赖之后，首先我们来认识一下state ，state就是要存储的状态，可以想象成一个菜鸟驿站仓库，里面的快递就是我们存放的每个变量，所以怎么获取到这个变量？有两种办法，第一种就是直接获取，如图：

    在store文件夹下面的index.js就是脚手架为我们生成的vuex文件，在state定义一个count变量，因为已经全局挂载了，所以组件用到时直接用$store.state.count获取即可第二种就是用vuex给我们提供的mapstate来完成，用es6写法...mapstate（后续都用此方法来完成）

    

    

4. 接下来是mutation，是负责存放同步方法的，可以理解为一个负责要立即拿出快递的快递员，它的调用是用this.$store.commit()参数名第一个就是要调用mutation里面的函数名，第二个可以自定义传入参数，如图

    我们在vuex定义了add函数，这里的playload就是用来传入的参数，当用commit调用时即可自定义传入，调用代码如下

    

5. 最后就是actions，用来处理异步操作，可以立即为一个要代拿快递的快递员，但是不能够及时送达到手上，所以要经过代拿的步骤，但最终要通过快递员给达客户，所以要通过mutation来实现。

    如图，我们在actions定义了getAsyncCount函数，参数a相当于组件中的this.$store的运行实例，参数b是自定义传入参数，如图

    注：如果没有用mapActions的方法的话，我们需用this.$store.dispatch()来调用