Vuex Modules Creating Nested Object

Question

I have been trying to separate my store.js file into multiple store modules. I have it working (somewhat), but it also created kind of a big issue.

In my initial one single file store, let's suppose this is my state object:

state: { user: '' }

And the output in the Vuex developer tools shows the user object as it should:

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

But after splitting the the store into modules the user object in the Vuex developer tools is as follows:

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

So it creates a new object using the name I give it in the modules object and import in the main store.js file, which then contains the "true" user object.

Is there any way to have it not create a new object and keep it the same as if the entire store lived inside the store.js file?

-Sergio

EDIT:

Here is the structure of my files: store store.js modules user.js

The code in the modules/user.js:

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

The code in my store.js

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

Prior to externalizing the store I would get in Vuex dev tools: User: { name: "John", age: 33 } After externalizing the store I get: User: { User: { name: "John", age: 33 } }

It's nesting User from the modules/user file inside the User in the store.js file. I want to avoid that (if its possible) so that I don't have to change everything in my components/template files.

Hi Hamilton, I don't understand your question...can you please rephrase. — Sergio
At what point in time do you do this assignment? And how is this assignment being done? Are you calling this assignment more than once? — Hamilton Gabriel
Are you assigning the user again in vuex, or are you doing this yourself? — Hamilton Gabriel

Jackson Baker Ryan Jackson Baker Ryan · Accepted Answer · 2018-11-16T06:07:54

The 'extra parent object' shown in the Vue Devtools is actually the namespaced module. If you set the User module's namespace attribute to false, the User state will no longer be placed within a namespaced object and will instead be

registered under the global namespace. (Vuex Namespacing)

Setting namespace: false is totally fine if you don't expect User function names to conflict with other modular state function names.

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

Vuex Modules Creating Nested Object

1 Answers