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

Vuex 的核心概念：State, Mutations, Actions, Getters

article 2025/1/29 7:41:45

Vuex 的核心概念：State, Mutations, Actions, Getters

Vuex 是 Vue.js 的官方状态管理库，提供了集中式的状态管理机制。它的核心概念包括 State（状态）、Mutations（变更）、Actions（动作）和 Getters（获取器）。以下是对这些概念的详细介绍及相应的代码示例。

State（状态）

State 是存储应用共享状态的地方。在 Vuex 中，State 是一个对象，包含应用中需要共享的所有数据。组件可以从 store 中读取状态，当状态发生变化时，依赖这些状态的组件会自动更新。

示例：

// 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 },
      ],
    };
  },
});

export default store;

在组件中访问 state：

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }} - {{ todo.done ? 'Done' : 'Pending' }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count', 'todos']),
  },
};
</script>

Mutations（变更）

Mutations 是更改 Vuex 中 state 的唯一方法。每个 mutation 都有一个字符串的事件类型（type）和一个回调函数（handler）。回调函数接收 state 作为第一个参数，可以直接修改 state。需要注意的是，mutations 必须是同步函数。

示例：

// store.js
const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
});

在组件中提交 mutation：

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
  },
};
</script>

Actions（动作）

Actions 类似于 mutations，不同之处在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

示例：

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

在组件中分发 action：

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
  },
};
</script>

在上述示例中，incrementAsync action 等待 1 秒后提交 increment mutation，从而异步地增加计数器的值。

Getters（获取器）

Getters 类似于组件的计算属性，用于从 state 中派生出一些状态。它们可以对 state 进行处理并返回结果，且结果会被缓存，只有当相关的 state 发生变化时才会重新计算。

示例：

// store.js
const store = createStore({
  state() {
    return {
      todos: [
        { id: 1, text: 'Learn Vuex', done: true },
        { id: 2, text: 'Build a project', done: false },
      ],
    };
  },
  getters: {
    doneTodos: (state) => {
      return state.todos.filter((todo) => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    },
  },
});

在组件中访问 getters：

// MyComponent.vue
<template>
  <div>
    <p>Done Todos Count: {{ doneTodosCount }}</p>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doneTodos', 'doneTodosCount']),
  },
};
</script>