4.Vuex -- Action

4. Vuex – Action

Action

Action 用于处理异步任务

如果需要通过异步方式变更状态，必须通过 Action ，而不能使用 Mutation ，但是在 Action 中还是需要通过 Mutation 的方式间接变更状态

const store = new Vuex.Store({
  state: {
    状态名称:值,
    ...
  },
  mutations: {
    事件名 (state, [参数...]) {
      // 变更状态
      state.状态名称
    },
    ...
  },
  actions: {
    异步事件名 (context) {
      // 异步操作
      ...
      // 通过 context 调用 mutation 中的事件变更 state 的状态
      context.commit('事件名', [参数...])
    }
  }
})

访问方式一

methods: {
  // 触发 action
  事件名 () {
    this.$store.dispatch('异步事件名', [参数...])
  }
}

访问方式二

// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
    ...mapActions(['异步事件名', ...])
}