vuex Actions异步提交
Mutations只能是同步函数,而异步操作可以交给actions
简单例子
组件代码
调用action域方法使用dispatch
<template>
<div class="post">
<h3>{{$store.state.info}}</h3>
<button @click="setInfo">获得异步+</button>
</div>
</template>
<script>
export default {
name: "Post",
methods:{
setInfo() {
this.$store.dispatch('setInfo')
}
}
}
</script>
<style scoped>
</style>
index.js代码 注意需要在两个域分别写好setInfo函数
action域
actions: {
setInfo(context){
//模拟异步延迟
setTimeout(()=>{
context.commit('setInfo','异步消息')
},1000)
}
},
mutations域
setInfo(state,value){
this.state.info=value
}
效果
点击后过一会即会变为异步消息
同时也有辅助函数,语法用法一致