面试题：Vuex处理复杂嵌套状态结构时的模块化实践

模块划分原则

功能相关性：将相关功能的状态和逻辑划分到同一个模块。例如，项目相关的所有状态和操作都放在 project 模块，任务相关的放在 task 模块，成员相关的放在 member 模块。
高内聚低耦合：每个模块应尽量独立完成自己的功能，模块之间的依赖和交互应尽量少。

模块间状态的共享与交互方式

通过 commit 或 dispatch 触发其他模块的 mutation 或 action：在一个模块的 action 中，可以通过 context.rootDispatch 或 context.rootCommit 触发其他模块的 action 或 mutation。
使用 getters 共享状态：如果一个模块需要获取另一个模块的状态，可以通过定义 getters 来获取。例如，task 模块可能需要获取 project 模块中项目的当前阶段状态，project 模块可以定义一个 getter 来暴露该状态，task 模块通过 this.$store.getters['project/currentStage'] 来获取。

代码示例

src/
├── store/
│   ├── index.js
│   ├── modules/
│   │   ├── project.js
│   │   ├── task.js
│   │   ├── member.js

project.js 模块

const state = {
    currentProject: null,
    projectStages: {
        stage1: { subState1: '', subState2: '' },
        stage2: { subState1: '', subState2: '' }
    }
};

const mutations = {
    SET_CURRENT_PROJECT(state, project) {
        state.currentProject = project;
    }
};

const actions = {
    setCurrentProject({ commit }, project) {
        commit('SET_CURRENT_PROJECT', project);
    }
};

const getters = {
    currentStage(state) {
        return state.currentProject? state.currentProject.stage : null;
    }
};

export default {
    state,
    mutations,
    actions,
    getters
};

task.js 模块

const state = {
    tasks: []
};

const mutations = {
    ADD_TASK(state, task) {
        state.tasks.push(task);
    }
};

const actions = {
    addTask({ commit }, task) {
        // 假设需要根据项目阶段来添加任务
        const currentStage = this.$store.getters['project/currentStage'];
        if (currentStage ==='stage1') {
            commit('ADD_TASK', task);
        }
    }
};

export default {
    state,
    mutations,
    actions
};

member.js 模块

const state = {
    members: []
};

const mutations = {
    ADD_MEMBER(state, member) {
        state.members.push(member);
    }
};

const actions = {
    addMember({ commit }, member) {
        commit('ADD_MEMBER', member);
    }
};

export default {
    state,
    mutations,
    actions
};

index.js 入口文件

import Vue from 'vue';
import Vuex from 'vuex';
import project from './modules/project';
import task from './modules/task';
import member from './modules/member';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        project,
        task,
        member
    }
});

星途面试题库

面试题：Vuex处理复杂嵌套状态结构时的模块化实践

知识考点

面试题答案

模块划分原则

模块间状态的共享与交互方式

代码示例