Vuex mapAction的基本使用

mapAction-store中的异步方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    msg: 'Hello world',
    count: 0
  },
  getters: {
    reverseMsg(state) {
      return state.msg.split('').reverse().join('')
    }
  }
  mutations: {
    increate(state, payload) {
      state += payload
    }
  },
  actions: {
    // increateAsync(context, payload) {
    //   setTimeout(() => {
    //     context.commit('increate', payload)
    //   }, 2000);
    // }
    // 🚀🚀 可以从 context 直接解构出来 { commit, dispatch, state, getters, rootGetters, rootState}
    increateAsync({ commit, dispatch, state }, payload) {
      setTimeout(() => {
        commit('increate', payload)
      }, 2000);
    }
  },
  modules: {
  }
})

vue组件

<template>
  <div>
    <p>count: {{num}}</p>
    <p>msg: {{message}}</p>
    <p>Normal-reverseMsg: {{$store.getters.reverseMsg}}</p>
    <p>Getter-reverseMsg: {{reverseMsg}}</p>
    <p>Rename-msgBeReversed: {{msgBeReversed}}</p>

    <!-- -------------------- Actions -------------------- -->
    <button @click="this.$store.dispatch('increateAsync',2)">Actions</button>
    <button @click="increateAsync(2)">Actions</button>

  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  methods: {

    // --------------------------- Actions
    // this.increateAsync() 映射到 this.$store.dispatch('increateAsync')
    ...mapActions(['increateAsync']),
    // 💛 💛 💛 💛 💛 💛 💛 💛 💛 💛
    // 如果是某一个module下的action,需要带上 namespace
    // 格式: mapActions(namespace,[mutationName])
    ...mapActions('home', ['setHomeListAsync']),
    ...mapActions('home', { setListHomeAsync: 'setHomeListAsync' }),
  },
  computed: {
    /**
      相当于
      num: state => state.count
      message: state => state.msg
     */
    ...mapState({ num: 'count', message: 'msg' }),
    /**
      相当于
      reverseMsg: getters.reverseMsg
     */
    ...mapGetters(['reverseMsg']),
    /**
      重命名,防止与组件内data数据冲突
      相当于
      msgBeReversed: getters.reverseMsg
     */
    ...mapGetters({ msgBeReversed: 'reverseMsg' }),
  }
}
</script>