vue-cli学习-Actions 异步提交

Actions 提交

Mutations 只能是同步函数，那异步操作可以交给 Actions
Actions 选项的作用是把数据提交给 Mutations 进行处理，让其可追踪

//store/index.js
//状态值
state: {
    info : ''
},
//修改状态
mutations: {
    setInfo(state, value) {
        state.info = value
    }
},
//异步
actions: {
    setInfo(context) {
        //模拟异步延迟
        setTimeout(() => {
            //执行 mutations 状态修改
            context.commit('setInfo', '异步信息')
        }, 1000)
    }
    //ES6结构语法
    // setInfo({commit}){
    //   setTimeout(()=>{
    //     commit('setInfo','sbsbsbsbsbsbsb')}
    //       ,5000)
    // }
},
//编写Post.vue 并配置好路由规则
<template>
  <div>
    <h3>{{ $store.state.info }}</h3>
    <button @click="setInfo">sbsb+</button>
  </div>
</template>

<script>
export default {
  name: "Post",
  methods:{
      setInfo() {
          this.$store.dispatch('setInfo');
      }
  }
}
</script>
<style scoped>
</style>

辅助函数 mapActions，和 mapMutations 用法一模一样

import { mapActions } from 'vuex'


...mapActions(['setInfo'])