Vuex中store对象的4个属性state，Mutations，Getters，action

一、State

Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。
比如在下面的Store对象里面就给state属性里面添加了一个count变量

 //创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });

二、Mutations

（说白了就是存放对state里面的变量进行操作的相关函数）

Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方

会接受 state作为第一个参数，第二个是自定义传参

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

当我们在其他组件里面想要调用store对象里的mutations里的函数的时候，如下面的代码所示
我们在提交commit时候，第一个参数传的increment,就是对应在 mutations中的increment。
一般通过方法或钩子触发，例如：

 methods: {
   getVal(event) {
     //获取当前的按键的值
     let value = event.target.dataset.value;
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", value);
   }
 }

如果要在其他组件中获取store里的count变量的值，采用{{count}}方式：

export default {
  computed: {
      count(){
          return this.$store.state.count;
      }
  }
};  

总结
1.increment官方说是type，其实就是注册的事件名
2.第二个参数可以是单个参数，如果是多个参数，我们则用对象放入，否则会报错

三.Getters：

可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters
getters 接受 state 作为其第一个参数，举例如下：

 const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count * 3
   }
 });

这样的话，我们在其他组件中可以使用到这个新的变量了，如下所示
，先在其他组件中使用下面的代码导出newCount变量，然后通过{{newCount}}使用即可

export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};  

四、action：

用来解决异步流程来改变state数据。
而matution是直接进行同步操作的，如果你在mutations里进行异步操作，你会发现没用，并不会起任何效果
只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下：

export default new Vuex.Store({
  //存放数据
  state: {
    obj: {}, 
  },
  //4.通过commit mutations中的方法来处理
  mutations: {
    getParam (state,Object) {
	   //5.修改state中的数据
       state.obj= Object
    }
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {//我们直接把下面的context当成是上面的mutations属性即可
    getParamSync (context,Object) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
//action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('getParam',Object)
        },3000)
    }
  }
})

然后我们就在其他组件里这么调用就可以了

 methods: {
   getVal() {
	  let name= 'xia';
	  let age= '26';
	  let sex= 'man';
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',{name,age,sex})
   }
 }

总结：这四个属性有点类似于java里面的3层架构模式，state类似于entity层，Mutations类似于dao层，而action类似于service层