Question

我一直试图将store.js文件分成多个商店模块。我可以（某种程度上）运行它，但它也造成了一个大问题。

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

state: { user: '' }

Vuex开发人员工具中的输出将按原样显示用户对象：

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

但是在将商店划分为模块后，Vuex开发人员工具中的用户对象如下：

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

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

有什么办法可以使它不创建新对象，并使其与整个商店都位于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 } }

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

Answer 1

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

在全局名称空间下注册。（Vuex Namespacing）

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

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