Mutation与Action的使用

Vuex是一个状态管理模式，它采用集中式管理各个组件的状态，并以一定的规则使状态发生变化。整个应用的状态保存在store中，而mutation是改变这些状态的唯一方法。举个例子：

const state={
  a:1
}
const mutations={
   change(state,n){
      state.a=n;
   }

}
const store=newVuex.Store({
   state,mutations
})

我们如果需要修改状态a，则执行this.$store.commit('change',10)即可，视图view会自动进行变化。像这种逻辑较为简单的情况下，只用mutation完全足够，但mutation本身也有较大不足，必须是同步执行，当涉及异步操作时，状态则不会改变。例如：

const mutations={
   change(state,n){
      var promise = 
new Promise(function(resolve, reject) { 
     if ( ){ 
         resolve(value);
     } else {
 	 reject(error);
     } 
});
promise.then(function(){
  state.a=n;
}).catch(function(){
  //failure
})
}

}

像这种涉及异步的操作，我们则需要使用action，action本身不会修改状态，而是提交mutation，它没有同步的限制。例如：

const actions={
  submitchange ({ commit }) {
    setTimeout(() => {
      commit(“change”)
    }, 1000)
  }
}

此时状态可以正常修改，所以在较为复杂的项目中，综合使用mutation和action才能保证状态修改的准确性。