当前位置：首页 > article >正文

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

article 2025/1/31 4:44:46

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>

解释：