如何在 Vuex 中同时使用非命名空间模块和命名空间模块答案

【问题标题】：How to use non-namespaced and namespaces modules at the same time in Vuex如何在 Vuex 中同时使用非命名空间模块和命名空间模块
【发布时间】：2020-07-14 03:42:49
【问题描述】：

我试图拥有一个由命名空间模块和全局状态组成的状态。不幸的是，我可以访问全局操作，但无法获取全局状态属性。

如果我尝试在这样的组件中使用 mapState，

computed: {
  ...mapState(['editMode']),
  ...mapState('address', ['addresses']),
}

我可以访问地址，但 editMode 始终未定义。映射动作完美无缺，并根据 Vuex Chrome 工具更新状态。

但我注意到，全局状态显示在其自己的“命名空间”“全局”下。所以我尝试使用 ...mapState('global', ['editMode']) 进行映射，但出现命名空间不存在的错误。

这是我的代码：

index.ts

import Vue from 'vue';
import Vuex from 'vuex';
import address from './modules/address';
import global from './global';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    address,
    global,
  },
});

模块/地址.ts

export default {
  namespaced: true,

  state: {
    addresses: [],
  },

  mutations: {
    ...
  },

  actions: {
    ...
  },
};

global.ts

export default {
  namespaced: false,

  state: {
    editMode: 0,
  },

  mutations: {
    SET_EDIT_MODE(state, value) {
      state.editMode = value;
    },
  },

  actions: {
    setEditMode({ commit }, editMode) {
      commit('SET_EDIT_MODE', editMode);
    },
  },
};

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

状态不受namespace 的影响。在某种程度上，它总是被命名空间。这样我们就不会发生碰撞。

要从模块访问状态，您需要稍微详细一点：

computed: {
 ...mapState({
   editMode: state => state.global.editMode
 }),
 ...mapState('address', ['addresses']),
}

【讨论】：