eventbus的使用举例vuex

引用和介绍了基于Vue实现发布订阅模式的方式，即使用事件总线(EventBus)来进行组件之间的通信。首先，在一个模块中创建事件总线，并将其导出，以便其他模块可以使用或监听它。然后，在需要订阅事件的地方，使用`eventBus.$on`方法来监听事件，指定事件名称和回调函数。当事件被触发时，回调函数将会被执行。在需要发布事件的地方，使用`eventBus.$emit`方法来触发事件，指定事件名称和传递的参数。

关于Vuex的使用举例，Vuex是Vue的官方状态管理库，它提供了一种集中式存储管理应用的方式。和事件总线类似，Vuex也可以用于组件之间的通信。不过，Vuex更适合用于管理应用的共享状态和数据。

举例如下，假设有一个应用需要管理一个名为`count`的状态，可以使用Vuex来实现：
- 首先，在创建Vue实例之前，引入并使用Vuex插件。可以在`main.js`文件中进行如下配置：

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload.num
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

- 然后，在需要使用`count`状态的组件中，可以使用`mapState`和`mapMutations`辅助函数来简化代码。例如，在`showNum.vue`组件中：

<template>
  <div>
    计算和: {{ count }}
    <button @click="incrementCount">增加</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['incrementCount'])
  }
}
</script>

- 最后，在组件中使用`count`状态和`incrementCount`方法即可。`count`可以通过计算属性的方式获取，`incrementCount`可以通过方法来触发对应的mutation。

总结来说，事件总线(EventBus)适合用于简单的组件之间通信，而Vuex适合用于管理应用的共享状态和数据。在具体的应用场景中，可以根据需要选择适合的方式来进行组件之间的通信和状态管理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vuex使用详细说明及实例](https://blog.csdn.net/to_the_Future/article/details/122809337)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue中组件之间8种通信方式](https://blog.csdn.net/liushihao_/article/details/119617378)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]