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>