Vue-x全局状态管理

1.    基本使用

1.    下载vue-x，并引入（如果在脚手架配置中已经选择，则在store文件中已经写好基本配置）

2.    导出export default new Vuex.store({})

先创建vuex.store 挂载到new Vue实例上

3.    使用

        state:同普通页面中的data数据。使用方法：this.$store.state.数据名.

        mutations:对state中的数据加以处理，通普通页面中的methods.

        modules:当全局状态（state中的数据）太多时，可以用modules实现模块化管理。modules中的每一个对象                           都是一个模块，有一套自己独立的state,mutations,actions

如何改变state中的全局数据

1.    通过this.$store.dispatch

    流程如下：1.    this.$store.dispatch("actions中的函数名")

                       2.    actions中的函数（参数为obj）｛obj.commit("mutations中的函数名")｝   

                       3.    mutations中的函数（参数为state）｛state.数据名++｝ 

2.    通过this.$store.commit

    流程如下：1.    this.$store.commit("mutations中的函数名")  

                       2.    mutations中的函数（参数为state）｛state.数据名++｝ 

3.    如果是modules中的state数据

        访问数据通过this.$store.state.模块名.数据名

        改变数据通过this.$store.commit("模块名/actions中的函数名")

Mutations和Actions的区别

actions是一个专门处理异步请求回来的数据的，同步也可以写在actions中

mapMutations和mapActions是做什么用的

先引入 此时可以直接使用this.loginMutation()，相当于this.$store.commit("m1/loginMutation")

上图是Modules中模块数据的用法，如果不是Modules的话，则这么写...mapMutations(["loginMutation"])

数组中可以写入多个方法