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
    }

效果

点击后过一会即会变为异步消息

同时也有辅助函数,语法用法一致