掌握 Vuex Action，轻松搞定复杂流程！

2023-09-22 19:22:37

从 Vuex mutation 聊起

在上一篇博文中，我们讲了如何通过一些简单的动作来改变 store.js 中的数据对象。在实际工作中，这完全无法满足工作需求。因此，这篇博文将介绍如何做一些简单的流程判断。

Vuex Action 介绍

Vuex Action 是一个函数，用于执行异步操作或对 state 进行复杂的操作。它接收一个 context 对象作为参数，其中包含 commit、dispatch 和 state 属性。commit 用于提交 mutation，dispatch 用于分发 action，state 用于访问 store 的 state。

什么时候使用 Vuex Action？

在以下情况下，您需要使用 Vuex Action：

当您需要执行异步操作时，例如发送网络请求或读取本地存储。
当您需要对 state 进行复杂的操作时，例如计算一个值或更新多个 state 属性。
当您需要在多个组件中使用相同的逻辑时，例如验证用户输入或提交表单。

如何使用 Vuex Action？

要使用 Vuex Action，请按照以下步骤操作：

在 store.js 文件中定义一个 action。
在组件中使用 mapActions 辅助函数将 action 映射到组件的方法。
在组件的方法中调用映射的 action。

一个简单的例子

下面是一个简单的 Vuex Action 示例，用于验证用户输入：

// store.js
export const actions = {
  validateInput({ commit }, input) {
    if (input.length > 0) {
      commit('SET_INPUT_VALID', true)
    } else {
      commit('SET_INPUT_VALID', false)
    }
  }
}

// MyComponent.vue
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'validateInput'
    ]),
    onInputChange(input) {
      this.validateInput(input)
    }
  }
}