Odtnhj

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.

Given your initial store state:

state: user: '' 

And an object with the following shape representing a user:

 name: "John", age: 33 

You can write a mutation as:

SET_USER: (state, user) => 
 Object.assign(state, user )

Commit the user:

this.$store.commit('SET_USER', user)

This is assuming no module namespaces of course.