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才能保证状态修改的准确性。