vuex怎样写actions异步修改状态

本文详细介绍了Vuex中actions如何用于异步修改状态。通过对比actions与mutations的差异,阐述了actions的异步特性,并通过实例演示了如何在actions中使用setTimeout进行异步操作,以及在组件中如何调用这些actions。通过实践,读者可以理解actions在Vuex状态管理中的作用和使用方式。
摘要由CSDN通过智能技术生成

actions异步修改状态与mutations同步修改状态是两个容易混淆的概念,因为两者在执行上,很难测试出两者的差别,而我们要区别它们两,首先你得区分同步与异步,我的理解是,同步更像是一条流水线作业,而异步则更像是多条,例子你比如打电话,我们通常是我打给我妈,打完之后,再跟我爸打,而异步更像是某聊天工具,你既可以跟你爸聊,又可以跟你妈聊,你跟你妈聊可以在你爸的后面,也可以在他前面,你爸也是

而actions与mutations的区别就在此,mutations是你进行用百度钱包买一件商品时,你必须先把东西购买流程走完你才能再购买另一件商品而actions是你完全可以一样在准备结算时,你可以选择其他商品,结算完其他商品再进行商品的结算,也可以一起结算。

下面我具体介绍actions写法

 

第一步 在你建立vuex的store.js中声明actions方法

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state={//状态对象

 

count1:1,

 

 

 

},

const mutations={//触发状态

  jia(state,n){

        state.count1+=n;

    },

 jian(state){

        state.count1--;

    },

 

},

const actions={

jiaAction(context){

 

context.commit('jia',10)

/*这句话就是说,我现在store调用了同步的方法jia()*/

 

},

jianAction({commit}){

 

 

commit('jian')/*这句话就是说,我现在store调用了同步的方法jian()*/

}

 

 

}

 

 

export default new Vuex.Store({

 

 

 

state,

mutations,

getters,

actions/*这与state,mutations的操作方法是相同*/

})

第二步 在你的模板(比如a.vue)里引入你需要actions方法

1)im

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值