Vuex模块创建嵌套对象

Question

我一直试图将我的store.js文件分成多个存储模块。我让它工作(有点)，但它也创造了一个大问题。

在我最初的一个文件存储中，让我们假设这是我的state对象：

state: { user: '' }

Vuex developer工具中的输出以应有的方式显示了用户对象：

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

但是，在将存储划分为模块之后，Vuex developer工具中的用户对象如下：

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

因此，它使用我在模块对象中给它命名的名称创建一个新对象，并在主store.js文件中导入它，该文件随后包含“真”用户对象。

有没有办法不让它创建一个新对象，并保持它与整个商店生活在store.js文件中的相同呢？

-Sergio

编辑：

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

模块/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 } }

它从User文件中的modules/user文件嵌套User。我希望避免这种情况(如果可能的话)，这样我就不必更改组件/模板文件中的所有内容。

Answer 1

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

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

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

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