Vue.js 使用 Vuex 管理组件间的共享状态

今天咱们来聊聊如何用 Vuex 来管理 Vue.js 应用中各个组件之间的共享状态。如果你曾经在项目中为了让组件共享数据而头疼，那么这篇文章就是为你准备的。

什么是 Vuex？

简单来说，Vuex 就是 Vue.js 的官方状态管理工具。它提供了一个集中式的存储，用来管理应用中所有组件的共享状态。这样一来，无论你的组件嵌套多深，都能方便地访问和修改这些共享数据。

为什么需要 Vuex？

当你的应用变得复杂时，组件之间的通信可能会变得混乱。比如，兄弟组件之间需要共享数据，或者深层嵌套的子组件需要修改父组件的状态。这时候，使用 Vuex 可以让状态管理变得更加清晰和高效。

如何使用 Vuex？

安装 Vuex

首先，你需要在项目中安装 Vuex。如果你使用的是 Vue 3，请确保安装 Vuex 4.x 版本。
```
npm install vuex@next --save
```

创建 Store

接着，我们需要创建一个 Vuex Store，用来存放共享的状态。在项目中创建一个 store.js 文件，内容如下：

// store.js
import { createStore } from 'vuex';const store = createStore({state() {return {count: 0,todos: [{ id: 1, text: 'Learn Vuex', done: true },{ id: 2, text: 'Build a project', done: false },],};},mutations: {increment(state) {state.count++;},addTodo(state, todo) {state.todos.push(todo);},},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);},},getters: {doneTodos: (state) => {return state.todos.filter((todo) => todo.done);},doneTodosCount: (state, getters) => {return getters.doneTodos.length;},},
});export default store;

解释：

state：存储共享的数据，比如 count 和 todos 列表。
mutations：定义同步修改状态的方法，比如 increment 用来增加 count，addTodo 用来添加新的待办事项。
actions：定义异步操作，然后提交 mutations，比如 incrementAsync 会在 1 秒后提交 increment。
getters：类似于计算属性，用来派生出一些状态，比如获取已完成的待办事项列表和数量。

在 Vue 应用中注册 Store
然后，在你的 Vue 应用的入口文件（比如 main.js）中，引入并注册这个 store：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用 Store
现在，你可以在任何组件中访问和修改共享的状态了。比如，在一个组件中：

<!-- MyComponent.vue -->
<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="incrementAsync">Increment Async</button><p>Done Todos Count: {{ doneTodosCount }}</p><ul><li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li></ul></div>
</template><script>
import { mapState, mapGetters } from 'vuex';export default {computed: {...mapState(['count']),...mapGetters(['doneTodos', 'doneTodosCount']),},methods: {increment() {this.$store.commit('increment');},incrementAsync() {this.$store.dispatch('incrementAsync');},},
};
</script>

解释：