【Vuex：在带命名空间的模块内访问全局内容】

一、命名空间与全局内容的关系

1. 什么是命名空间？

在 Vuex 中，命名空间用于为模块提供局部作用域。开启命名空间后：

• state、getters、mutations 和 actions 都被限制在当前模块内。
• 模块内访问其他模块或全局内容时需要使用特殊方式。

✅ 开启命名空间

const userModule = {
  namespaced: true, // 开启命名空间
  state: () => ({
    name: 'Alice'
  }),
  getters: {
    userName: (state) => state.name
  },
  mutations: {
    SET_NAME(state, newName) {
      state.name = newName;
    }
  },
  actions: {
    updateName({ commit }, newName) {
      commit('SET_NAME', newName);
    }
  }
};

在主 store 中注册模块：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    user: userModule // 注册带命名空间的模块
  },
  state: {
    appTitle: 'My Vue App'
  },
  getters: {
    appTitle: (state) => state.appTitle
  },
  mutations: {
    SET_APP_TITLE(state, title) {
      state.appTitle = title;
    }
  },
  actions: {
    setAppTitle({ commit }, title) {
      commit('SET_APP_TITLE', title);
    }
  }
});

二、在命名空间模块内访问全局内容

1. 访问全局 state

在命名空间模块内访问全局状态时，需使用 rootState：

actions: {
  printGlobalState({ rootState }) {
    console.log('全局状态:', rootState.appTitle);  // 访问全局 state
  }
}

✅ rootState 是访问全局状态的入口，不受命名空间限制。

2. 访问全局 getters

在命名空间模块内访问全局 getters 时，使用 rootGetters：

actions: {
  printGlobalGetter({ rootGetters }) {
    console.log('全局 getter:', rootGetters.appTitle);  // 访问全局 getter
  }
}

✅ rootGetters 允许访问其他模块的 getter。

3. 调用全局 mutations

在命名空间模块内调用全局 mutations，需要通过 commit 的第三个参数传入 { root: true }：

actions: {
  updateGlobalTitle({ commit }, newTitle) {
    commit('SET_APP_TITLE', newTitle, { root: true });  // 调用全局 mutation
  }
}

✅ 第三个参数 { root: true } 指定为全局 mutation。

4. 调用全局 actions

在命名空间模块内调用全局 actions，同样需要传入 { root: true }：

actions: {
  triggerGlobalAction({ dispatch }, newTitle) {
    dispatch('setAppTitle', newTitle, { root: true });  // 调用全局 action
  }
}

✅ { root: true } 确保调用的是全局 action 而非当前模块的同名 action。

三、示例：模块间访问与全局状态共享

假设有两个模块：

• user 模块：存储用户信息
• cart 模块：存储购物车信息

1. 定义模块

const userModule = {
  namespaced: true,
  state: () => ({
    name: 'Alice'
  }),
  mutations: {
    SET_NAME(state, newName) {
      state.name = newName;
    }
  },
  actions: {
    updateName({ commit }, newName) {
      commit('SET_NAME', newName);
    }
  }
};

const cartModule = {
  namespaced: true,
  state: () => ({
    items: []
  }),
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item);
    }
  },
  actions: {
    addItem({ commit, rootState, dispatch }, item) {
      // 使用 rootState 访问全局 state
      console.log('当前用户:', rootState.user.name);
      
      // 调用 user 模块的 mutation
      dispatch('user/updateName', 'Bob', { root: true });

      // 本模块添加商品
      commit('ADD_ITEM', item);
    }
  }
};

2. 注册模块

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

3. 测试调用

在组件中：

// 添加商品并修改用户名
store.dispatch('cart/addItem', { id: 1, name: 'Laptop' });

console.log(store.state.user.name);  // Bob
console.log(store.state.cart.items); // [{ id: 1, name: 'Laptop' }]

四、常见问题与注意事项

1. 如何在组件中访问其他模块的 state？

即使模块使用了命名空间，在组件中仍然可以使用 mapState() 和 mapGetters() 访问其他模块的状态：

import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState('user', ['name']),     // 映射 user 模块的 state
    ...mapGetters('cart', ['items'])   // 映射 cart 模块的 getter
  }
};

2. 模块命名冲突问题

开启命名空间后，同名的 mutations 和 actions 不会冲突。但调用时需要注意指定模块路径：

// 调用 user 模块的 action
store.dispatch('user/updateName', 'Alice');

// 调用全局 action
store.dispatch('setAppTitle', 'New Title');

五、总结

在 Vuex 中使用命名空间模块时，如果需要访问全局内容，可以使用以下方式：

• 访问全局 state：rootState
• 访问全局 getters：rootGetters
• 调用全局 mutations：commit('mutation', payload, { root: true })
• 调用全局 actions：dispatch('action', payload, { root: true })

在实际开发中，合理使用命名空间可以更好地管理状态，避免命名冲突，并保持代码结构清晰。同时，使用全局访问能力可以灵活地在模块之间共享数据和操作。