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



©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值