知识篇 -- Vuex状态管理：构建可预测的应用状态

Ray Shine 2024/5/1 Vue进阶知识状态管理

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在大型Vue.js应用中，多个组件之间共享状态是一个常见的需求。如果组件之间直接传递数据，很容易导致数据流混乱、难以维护。Vuex 是Vue.js官方提供的状态管理模式和库，它集中管理应用的所有组件的状态，并以可预测的方式进行状态变更。Vuex借鉴了Flux和Redux的思想，但专为Vue.js设计，与Vue的响应式系统深度集成。

# 什么是Vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

核心概念：

State (状态)：驱动应用的数据源。
Getter (获取器)：从State中派生出一些状态，类似于计算属性。
Mutation (变更)：唯一允许修改State的方式，必须是同步事务。
Action (动作)：提交Mutation，可以包含异步操作。
Module (模块)：将Store分割成模块，每个模块拥有自己的State、Getter、Mutation、Action。

# Vuex的核心概念详解

# 1. State：单一状态树

Vuex使用单一状态树，即所有应用级别的状态都集中在一个大的对象中。这使得应用的状态一目了然，易于调试和管理。

示例：

const store = new Vuex.Store({
    state: {
        count: 0,
        user: {
            name: 'Alice',
            age: 25
        }
    }
});

// 在组件中访问State
// this.$store.state.count
// mapState 辅助函数

# 2. Getters：派生状态

Getters类似于Vue组件中的计算属性，它们用于从State中派生出一些新的状态，这些派生状态会根据其依赖的State的变化而自动更新。

示例：

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: '学习Vuex', done: true },
            { id: 2, text: '完成项目', done: false }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done);
        },
        doneTodosCount: (state, getters) => {
            return getters.doneTodos.length;
        },
        getTodoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id);
        }
    }
});

// 在组件中访问Getters
// this.$store.getters.doneTodos
// mapGetters 辅助函数

# 3. Mutations：同步状态变更

Mutations是唯一允许修改State的地方。每个Mutation都有一个字符串类型的事件类型 (type) 和一个回调函数 (handler)。回调函数接收 state 作为第一个参数，还可以接收额外的参数 (payload)。

必须是同步函数：Mutation必须是同步的，因为异步操作会导致状态变更的顺序不可预测，难以调试。
提交方式：通过 store.commit('mutationType', payload) 提交Mutation。

示例：

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        incrementBy(state, payload) {
            state.count += payload.amount;
        }
    }
});

// 在组件中提交Mutation
// this.$store.commit('increment');
// this.$store.commit('incrementBy', { amount: 10 });
// mapMutations 辅助函数

# 4. Actions：异步操作与提交Mutation

Actions类似于Mutations，但它们提交的是Mutation，而不是直接变更State。Actions可以包含任意异步操作。

可以包含异步操作：Actions可以执行异步操作，如API请求、定时器等。
提交Mutation：Actions通过 context.commit('mutationType') 提交Mutation来变更State。
分发方式：通过 store.dispatch('actionName', payload) 分发Action。

示例：

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        incrementAsync(context) {
            return new Promise(resolve => {
                setTimeout(() => {
                    context.commit('increment');
                    resolve();
                }, 1000);
            });
        },
        incrementIfOdd({ state, commit }) {
            if ((state.count + 1) % 2 === 0) {
                commit('increment');
            }
        }
    }
});

// 在组件中分发Action
// this.$store.dispatch('incrementAsync').then(() => {
//     console.log('Count incremented asynchronously!');
// });
// mapActions 辅助函数

# 5. Modules：模块化管理

当应用变得复杂时，Store对象可能会变得非常庞大。Vuex允许我们将Store分割成模块 (Modules)，每个模块拥有自己的State、Getter、Mutation、Action，甚至嵌套子模块。

命名空间：模块默认是带命名空间的，这意味着模块内部的Getter、Mutation、Action会被自动加上模块名作为前缀。
局部状态：模块内部的State是局部的，但Getter、Mutation、Action仍然可以访问根State。

示例：

const moduleA = {
    namespaced: true, // 开启命名空间
    state: {
        count: 1
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    getters: {
        doubleCount: state => state.count * 2
    },
    actions: {
        incrementIfOddOnRootSum({ state, commit, rootState }) {
            if ((state.count + rootState.count) % 2 === 1) {
                commit('increment');
            }
        }
    }
};

const moduleB = {
    namespaced: true,
    state: {
        count: 2
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    }
};

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    },
    state: {
        count: 0 // 根State
    }
});

// 访问模块State
// store.state.a.count
// 提交模块Mutation
// store.commit('a/increment');
// 分发模块Action
// store.dispatch('a/incrementIfOddOnRootSum');

# Vuex在Vue组件中的使用

Vuex提供了一系列辅助函数，可以更方便地将Store中的State、Getters、Mutations、Actions映射到组件的计算属性或方法中。

mapState：将State映射为组件的计算属性。
mapGetters：将Getters映射为组件的计算属性。
mapMutations：将Mutations映射为组件的方法。
mapActions：将Actions映射为组件的方法。

示例：

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
    computed: {
        ...mapState(['count']), // 映射根State的count
        ...mapGetters(['doneTodosCount']), // 映射根Getters的doneTodosCount
        // 映射模块State和Getters
        ...mapState('a', {
            moduleACount: state => state.count
        }),
        ...mapGetters('a', ['doubleCount'])
    },
    methods: {
        ...mapMutations(['increment']), // 映射根Mutation的increment
        ...mapActions(['incrementAsync']), // 映射根Action的incrementAsync
        // 映射模块Mutation和Action
        ...mapMutations('b', {
            moduleBIncrement: 'increment'
        }),
        ...mapActions('a', ['incrementIfOddOnRootSum'])
    }
};

# 总结

Vuex为Vue.js应用提供了一个强大而可预测的状态管理解决方案。通过集中管理应用状态，并强制遵循严格的变更规则（Mutations必须同步，Actions可以异步并提交Mutations），Vuex有效解决了组件间共享状态的复杂性，使得大型应用的状态流清晰可控，易于调试和维护。掌握Vuex是构建复杂、可扩展Vue应用的关键技能。

Vue Router →

一ξひβθ光 i