模块化与进阶用法

🎯 引言

在前端开发中，尤其是使用 Vue 2.0 的项目中，Vuex 是非常重要的状态管理工具。当项目越来越复杂时，单一的 store 就容易变得臃肿且难以维护。这时候我们就需要了解 Vuex 的模块化用法、简化写法，以及如何实现状态的持久化保存。

🧐 为什么需要模块化？

随着项目的发展，单一的 store 会变得又大又乱。维护起来非常不方便，尤其是多人协作的情况下，大家同时修改一个大文件容易冲突。

模块化让每个业务模块对应一个小的独立 store，职责清晰，互不干扰。协作开发时，每个人负责的模块边界明确，沟通成本降低。

例子说明

假如你开发的是电商网站，你可以分成：

• 用户模块：管理登录状态、用户信息等
• 商品模块：管理商品列表、详情
• 购物车模块：管理购物车数据
• 订单模块：管理订单相关状态

每个模块都像一个小仓库，管理自己的数据和行为。

📦 什么是模块（Module）？

Vuex 允许我们把 store 拆分成模块（Module），每个模块拥有自己独立的 state、mutation、action 和 getter。这样可以让我们把不同的业务逻辑分开管理，代码更加清晰，维护也更方便。

举个生活中的例子：

想象你有一个大书架，里面放了很多书。如果把所有书都乱放一个大格子里，很难找到你需要的书。模块化就像给书架分成好几个小格子，每个格子放不同类型的书，比如小说、工具书、杂志等等。这样你想找哪类书，一眼就能看出来，拿起来也方便。

模块的结构示范

const moduleA = {
    state: {
        count: 0,
    },
    mutations: {
        increment(state) {
            state.count++;
        },
    },
    actions: {
        incrementAsync({ commit }) {
            setTimeout(() => {
                commit('increment');
            }, 1000);
        },
    },
    getters: {
        doubleCount(state) {
            return state.count * 2;
        },
    },
};

然后在主 store 中注册这个模块：

const store = new Vuex.Store({
    modules: {
        a: moduleA,
    },
});

这样，moduleA 的状态和方法就被独立管理了。

✍️ 简化写法

在 Vue 组件中访问 Vuex 的状态和调用方法时，如果直接写 this.$store.state.a.count 或者 this.$store.commit('a/increment')，代码会变得很冗长。

Vuex 提供了几个辅助函数来简化代码：

• mapState：映射模块的状态到组件计算属性
• mapGetters：映射模块的 getter 到计算属性
• mapActions：映射模块的 action 到方法

示例

假设我们有上述的模块 a，组件中使用简化写法如下：

<template>
    <div>
        <p>计数：{{ count }}</p>
        <p>双倍计数：{{ doubleCount }}</p>
        <button @click="incrementAsync">异步增加</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
    computed: {
        ...mapState('a', ['count']),
        ...mapGetters('a', ['doubleCount']),
    },
    methods: {
        ...mapActions('a', ['incrementAsync']),
    },
};
</script>

这里的 'a' 是模块名，告诉 Vuex 去对应模块找对应的状态和方法。

💾 如何实现状态持久化

默认情况下，Vuex 的状态只存在内存中，刷新页面后就会丢失。为了改善用户体验，我们通常需要把部分状态持久化到浏览器的 localStorage 中。

基本思路

每当 Vuex 状态发生改变时，将状态序列化保存到 localStorage。页面初始化时，从 localStorage 读取状态，恢复到 Vuex。

示例代码

state: {
    token: null,
    username: localStorage.getItem('name') || null,
    email: '',
},
mutations: {
    setToken(state, token) {
        state.token = token;
        localStorage.setItem('token', token); // ✅ 直接保存
    },
}

🧾 小节总结

• Vuex 模块化让大型项目的状态管理更清晰，方便维护和团队协作。
• 使用 mapState、mapGetters、mapActions 简化组件代码，提高开发效率。
• 通过监听状态变化并保存到 localStorage 实现状态持久化，提升用户体验。

❓ 知识问答（Q&A）

Q：模块化的好处是什么？

A：模块化可以让状态管理职责分明，不同业务模块独立，代码结构清晰，方便维护和协作。

Q：mapState 和直接访问 this.$store.state 有什么区别？

A：mapState 会自动映射模块状态为计算属性，代码更简洁，且便于组件响应式更新。

Q：状态持久化为什么不能保存所有状态？

A：因为有些状态可能包含敏感信息或动态数据，保存到 localStorage 可能有安全和性能风险。

🧪 小练习

请基于下面模板代码，实现一个购物车模块的 Vuex 模块，包含商品列表状态和添加商品的功能，并在组件中用 mapState 和 mapActions 调用。

const cart = {
    state: {
        items: [],
    },
    mutations: {
        addItem(state, item) {
            state.items.push(item);
        },
    },
    actions: {
        addItem({ commit }, item) {
            commit('addItem', item);
        },
    },
    getters: {
        itemCount(state) {
            return state.items.length;
        },
    },
};

export default cart;

import Vuex from 'vuex';
import Vue from 'vue';
import cart from './modules/cart';

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        cart,
    },
});

export default store;

<template>
    <div>
        <p>购物车商品数量：{{ itemCount }}</p>
        <button @click="addItem({ id: 1, name: '商品A' })">添加商品A</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
    computed: {
        // 填写这里
    },
    methods: {
        // 填写这里
    },
};
</script>

🎉 恭喜你已经掌握 Vuex 模块化管理、简化写法和状态持久化的技能啦！通过这些技巧，你能更好地组织大型 Vue 2.0 项目的状态，让代码更清晰，用户体验更优秀。