Vuex 模块创建嵌套对象答案

【问题标题】：Vuex Modules Creating Nested ObjectVuex 模块创建嵌套对象
【发布时间】：2019-04-13 16:20:24
【问题描述】：

我一直在尝试将我的 store.js 文件分成多个商店模块。我让它工作（有点），但它也产生了一个大问题。

在我最初的单个文件存储中，假设这是我的状态对象：

state: { user: '' }

Vuex 开发者工具中的输出显示了用户对象应该是这样的：

User: { name: "John", age: 33 }

但是将 store 拆分为模块后，Vuex 开发者工具中的 user 对象如下：

User: { User: { name: "John", age: 33 } }

所以它使用我在模块对象中给它的名称创建一个新对象，并导入到主 store.js 文件中，然后包含“真正的”用户对象。

有没有办法让它不创建新对象并保持它就像整个商店都存在于 store.js 文件中一样？

-塞尔吉奥

编辑：

这是我的文件的结构： store store.js modules user.js

modules/user.js 中的代码：

const state = { User: '' }
const mutations = { ... }
const actions = { ... }
export default { state, mutations, actions }

我的 store.js 中的代码

import User from './modules/user';
Vue.use(Vuex);
export default new Vuex.Store({
   modules: {
      User
   }
});

在外部化商店之前，我会在 Vuex 开发工具中获得： User: { name: "John", age: 33 } 外部化商店后，我得到： User: { User: { name: "John", age: 33 } }

它是从 modules/user 文件中的 User 嵌套在 store.js 文件中的 User 中的。我想避免这种情况（如果可能的话），这样我就不必更改组件/模板文件中的所有内容。

【问题讨论】：

【解决方案1】：

Vue Devtools 中显示的“额外父对象”实际上是 namespaced 模块。如果将 User 模块的 namespace 属性设置为 false，则用户状态将不再放置在命名空间对象中，而是

在全局命名空间下注册。 (Vuex Namespacing)

如果您不希望用户函数名称与其他模块化状态函数名称冲突，则设置 namespace: false 完全可以。

const store = new Vuex.Store({
  modules: {
    User: {
      namespaced: false,
      state: { user: '' },
      ...
    }
  }
}

【讨论】：