怎么在vuex中使用actions异步修改状态

怎么在vuex中使用 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)import引入mapActions

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

2）在你的方法中引入 ...mapActions(['jiaAction','jianAction'])

格式一般都是固定照抄即可

代码如下：

 
 
 
 
 

.color{
color:red;
}
 

第三步在你的组件的模板(a.vue)里引入点击事件

代码如下：

整体代码如下:

注:现在你点击你的+或-的按钮，观察它的值与你把

+
 -

换成

+
 -

有何不同？

没有区别说明你调试代码成功

第四步 进行异步验证

我们在我们的store.js中的jiaAction加入jiaAction方法

setTimeout(()=>{
context.commit('jian')
},3000)
console.log('我先被执行');

你再观察结果，你会发现jian这个方法在3s之后执行，你点jia依然可以在3s之内先执行，这就是异步修改状态与同步的区别。

整体代码如下:

a.vue部分

整体代码如下:

store.js部分

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){
setTimeout(()=>{
context.commit('jian')
},3000)
console.log('我先被执行');
context.commit('jia',10)
/*这句话就是说，我现在store调用了同步的方法jia()*/

},
jianAction({commit}){


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


}


export default new Vuex.Store({



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

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

新闻名称：怎么在vuex中使用actions异步修改状态
网站网址：http://cdxtjz.cn/article/jopihd.html