Vuex 事件处理指南：Mutations 与 Actions 详解

2024-03-02 02:27:34

利用 Vuex 有效处理事件

在 Vue.js 中，我们常使用全局事件总线来处理组件间通信。然而，随着项目规模扩大，我们需要管理全局状态，而 Vuex 成为理想选择。

如何在 Vuex 中处理事件？

Vuex 提供了替代事件总线的方式来实现组件间通信。有两种方法：

1. 使用 Vuex Mutations

Mutations 是唯一修改 Vuex 状态的方法。我们通过 commit 方法触发 mutations：

this.$store.commit('doSomethingInComponentB')

在 Vuex store 中定义 mutation：

mutations: {
  doSomethingInComponentB(state) {
    // 在组件 B 中执行操作
  }
}

2. 使用 Vuex Actions

Actions 用于异步操作或执行多个 mutations：

this.$store.dispatch('doSomethingInComponentB')

在 Vuex store 中定义 action：

actions: {
  doSomethingInComponentB({ commit }) {
    // 在组件 B 中执行操作
    commit('doSomethingInComponentB')
  }
}

选择方案的依据：

单一操作，使用 mutations。
异步操作或多 mutations，使用 actions。

示例：使用 Vuex Mutations 处理事件

// 组件 A
this.$store.commit('doSomethingInComponentB')

// Vuex store
mutations: {
  doSomethingInComponentB(state) {
    this.$emit('doSomethingInComponentB')
  }
}

// 组件 B
this.$on('doSomethingInComponentB', function(){ this.doSomething() })