举例 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`组件中： ```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 ]

### Vuex 入门教程 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 #### 安装与初始化 为了使用 Vuex，首先需要安装并配置它。以下是基本的设置过程： 1. **创建 Store 文件夹和文件** 需要在项目中新建 `store` 文件夹，并在其中创建 `store.js` 文件[^1]。 2. **引入 Vuex 并注册插件** 在 `store.js` 中导入必要的依赖项并通过 `Vue.use()` 注册 Vuex 插件： ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, getters: {} }); ``` 3. **挂载到 Vue 实例** 将创建好的 store 挂载至 Vue 的根实例中以便在整个应用程序中访问[^3]: ```javascript import Vue from 'vue'; import App from './App.vue'; import store from './store'; new Vue({ render: h => h(App), store, }).$mount('#app'); ``` #### 核心概念解析 - **State**: 存储共享的数据。可以通过 `this.$store.state.propertyName` 访问[^4]。 - **Getter**: 类似于计算属性，用于派生状态。可以在模板中像读取 State 一样使用 Getter[^4]。 ```javascript const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos: (state) => { return state.todos.filter(todo => todo.done); } } }); ``` - **Mutation**: 提交更改的方法，唯一能改变 State 的方式。必须是同步操作[^4]。 ```javascript mutations: { increment(state) { state.count++; } } ``` - **Action**: 负责处理异步逻辑的操作方法，最终会提交 Mutation 来更新 State[^4]。 ```javascript actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment'); }, 1000); } } ``` #### 使用场景举例 假设有一个简单的计数器功能需求，可以这样实现: ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count += 1; } }, actions: { incrementIfOdd({ commit, state }) { if ((state.count + 1) % 2 === 0) { commit('increment') } } }, getters: { evenOrOdd: state => state.count % 2 ? '奇数' : '偶数' } }); ``` 在组件中调用这些功能时，可以直接通过 `$store` 对象完成交互[^4]: ```html <template> <div class="counter"> <p>{{ count }}</p> <!-- 显示当前count --> <p>{{ evenOrOdd }}</p> <!-- 判断奇偶性 --> <button @click="increment">+</button> <button @click="incrementIfOdd">如果加一是偶数则增加</button> </div> </template> <script> export default { computed: { count() { return this.$store.state.count; }, evenOrOdd() { return this.$store.getters.evenOrOdd; } }, methods: { increment() { this.$store.commit('increment'); }, incrementIfOdd() { this.$store.dispatch('incrementIfOdd'); } } }; </script> ``` #### 工作流概述 Vuex 的工作流程围绕着单向数据流动展开：当视图触发事件后执行 Action；Action 执行完成后提交 Mutation 更新 State；最后由 View 层订阅最新的 State 数据渲染界面[^2]。 ---