从全局事件总线到Vuex：理解Vue生态的思想演进

2024-02-11 00:06:53

前言
作为一名资深Vue开发人员，我一直以来都对Vue生态圈的思想演进充满着好奇。今天，我想和大家聊聊这样一个问题：在Vue框架中，为什么在引入全局事件总线后，还要引入Vuex？这两个机制看起来似乎都很相似，但实际上却有着本质的不同。通过对比两种机制的不同，我们可以深入浅出地阐述Vue生态思想的演进，以及如何根据具体应用场景选择最合适的数据共享方式。

全局事件总线

全局事件总线，顾名思义，就是一个全局的事件中心。它可以让我们在任何组件中发布和订阅事件，从而实现组件之间的通信。全局事件总线的实现非常简单，只需要一个空的Vue实例即可。

const eventBus = new Vue();

要发布事件，可以使用eventBus.$emit()方法，要订阅事件，可以使用eventBus.$on()方法。

// 发布事件
eventBus.$emit('some-event', data);

// 订阅事件
eventBus.$on('some-event', (data) => {
  // 处理事件
});

全局事件总线简单易用，而且适用于各种场景。然而，它也有一个缺点，那就是容易造成代码混乱。因为所有的事件都集中在一个地方，所以当代码量变大时，很容易找不到自己想要的事件。而且，全局事件总线也不支持数据状态的管理，因此当我们需要在组件之间共享数据时，就需要寻找其他的解决方案。

Vuex

Vuex是Vue官方推荐的状态管理工具，它提供了一套完善的API，可以让我们轻松地在组件之间共享数据。Vuex的核心是一个叫做store的对象，它存储着应用程序的所有状态。组件可以通过mapState()方法将store中的状态映射到自己的data中，也可以通过mapActions()方法将store中的方法映射到自己的methods中。

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

// component.vue
import { mapState, mapActions } from 'vuex'

export default {
  computed: mapState(['count']),
  methods: mapActions(['incrementAsync'])
}