Vuex状态模块结构

Question

I adopted the file structure on vuex with modules. Originally I just had everything in one store file (I don't know what I was thinking). Now that I refactored the code to a better more maintainable structure I am having issues with how to mimic the state that I had before.

My previous state for the user field was just a user object like this:

user: {...}

Now that I used this format

const state = {

}

const mutations = {
    fetchUser(state,user){
        console.log(user)
        state = user;
    }
};


const actions = {
    currentUser: ({commit}) => {
        axios.get('/user').then(response => {
            if(response.status == 200){
                commit('fetchUser', response.data.data);
            }
        }).catch(response =>  {

        });

    }
}

My state translates to :

user:{}

with an empty object. Shouldn't this assign the user into that user state object or am I missing something.

Answer 1

From docs :

Inside a module's mutations and getters, the first argument received will be the module's local state.

So your mutation should access the module object:

const mutations = {
    setUser(state, user){
        state.user = user; // Assuming you have a user module **
    }
};

** Assuming you have a user module this way:

const store = new Vuex.Store({
   modules: {
       user: moduleUser,
       // more modules ...
   }
})

Mutations should only modified the state. You should change your logic to fetch user data from an action only and not from your mutation itself, for example:

const actions = {
    currentUser: ({commit}) => {
        axios.get('/user').then(response => {
            if(response.status == 200){
                var response = response.data.data;
                commit('setUser', response);
            }
        }).catch(response =>  {

        });

    }
}