vuex的使用

一、配置

1、在store/index中配置

2、导入maiin.js，传入根组件中

二、state

1、state中存放了当前项目中所有的公共的数据

2、在组件中使用$store.state.arr访问

3、在方法中使用this.$store.state.arr访问

三、computed

computed:计算属性：当前组件复杂的数据处理操作

1、computed中申明的是若干个函数，这些函数的函数名会被解析成变量名，这些函数的返回值，会被解析成变量值。函数内部是对某个数据做了各种数据处理（判断、限制，+，- 等）

2、 computed中的函数时被当做变量使用的，调用时直接使用函数名，且不用加(),(例如:{{faName}})

3、 computed也会动态的捕获且响应数据的变化。

4、 computed中不可重复声明data中已经声明好的数据，但是可以调用。

computed中声明了一个函数fn1,会被解析成一个键值对fn1:function(){},在DOM中调用时，把键fn1直接以{{}}的形式渲染到页面上

四、mapState

vuex提供了一个函数mapState，用来批量的获取store中的数据

1、在当前组件中，从vuex引入mapState函数

import {mapState}from 'vuex'

2、在computed计算属性中，在mapState函数中引入当前组件需要操作的位于store中state中的数据

3、在DOM中以变量的形式进行渲染

五、getters

vuex提供了getters，getters中可以声明属性和函数，可以在这些属性和函数中对state中的数据做一些处理。这些函数可以在子组建中被调用

ps：getters存放了当前项目中所有的对于state的数据获取(如包含过滤过程)方式

1、在getters中声明属性和方法

2、在组件的方法中使用this.$store.getters.的形式调用

六、mapGetters

mapGetters其实和mapState一样，提供了一种便捷的访问getters中属性的方式

1、在当前组件中，从vuex引入mapGetters函数

2、在computed计算属性中，在mapGetters函数中引入当前组件需要操作的位于store中getters中的属性或方法

3、在DOM中以变量的形式渲染引入的属性或方法

七、mutations：对store中的state做数据处理，值的修改操作

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

这个意思是想要修改state中的数据值，必须用vuex提供的mutation。原因是这样的，vue建议我们vuex在开发环境下最好启用严格模式（发布环境要关闭严格模式），vuex又规定，如果vuex启用了严格模式，那么所有对state中的状态值的改变必须由mutation完成，否则就会报错（底层代码的机制被破坏）。

所以我们要用mutation改变store中的数据。

1、在store中的mutations中声明对state中的数据处理的属性和方法

2、要在组建中使用commit调用mutation中的数据，也可以向mutation中声明的函数传参，对于mutations中的函数传参，vuex还有一个建议： 这个参数尽量是一个对象，这样便于传输大量数据。

3、在DOM中调用这个函数，获取mutations中处理后的数据

八、mapMutation

当组建中要调用mutations中的若干个对state进行数据修改的函数，为了不产生代码冗余，vuex提供了mapMutation。

1、在mutations申明若干个属性和方法

2、在当前组件中，从vuex引入mapMutations函数
3、在组建中使用mapMutation调用

4、在当前组件中即可以调用appendData和deleteData这2个函数了，获取这2个函数处理后的数据

九、Actions：经过所有的异步操作才能完成的state中的数据的异步操作，必须要在action中

vuex规定mutation中对于数据的操作必须是同步操作，如果你对于store中的数据操作是异步的，要用vuex提供的actions，actions并不直接修改state中的数据。一般情况下，我们都在action中处理异步操作，在异步操作的回调中或者指定位置修改数据时，再去调mutations中的函数。

1、context是vuex提供给actions，可通过它调用state、mutations、getters中的数据(context.state,context.commit,context.getters)

2、使用dispatch调用actions