Modules states can't be overwritten in their entirety

[steffanlloyd]

A couple things at once here, sorry. Hopefully I'm posting this in the correct location, apologies if not – I'm not a seasoned github user.

This is best shown by example. The following code, which is a module in my vuex store, doesn't work as expected (i.e. the changes aren't tracked by vue).

Note: this module is called "comments", the state variable in the mutation is named comments just because that's exactly what it is.

// "comments" module

const state = {};

const mutations = {
    /**
    * Stores the data from an ajax request into the state of comments
    * @param comments [the state variable]
    * @param data [the ajax data from server, an object containing a 'comments' property, which it itself is an object
    **/
    COMMENT_SETDATA (comments, data){
        comments = data.comments;
    },
};

export default {
    state,
    mutations
};

If I were to change this to comments.all = data.comments it would work, but just assigning this top level variable itself doesn't.

[Updated]: Clarified the situation a bit better.

[yyx990803]

State is an argument, which is just a local variable inside the function, assigning it to something else obviously won't work, that's how javascript works. The gist is that instead of replacing it like that, you should always treat the state as an irreplaceable root and hold actual state as properties under it.

[steffanlloyd]

Well explained, thanks – sorry to bring up a non-issue.

[NoahCardoza]

I'm wondering what the best practice would be when trying to achieve this?
I wrote this

  [SET_FILE_SYSTEM]: (state, details) => {
    emptyObjects(state, details)
    mergeObjects(state, details)
  }

But I have a felling this isn't exatly a best practice...

[BenRichter]

Better late than sorry... just as a reference. Overwrite whole store with response data:

SET_COMMENTS (state, response) {
  Object.assign(state, response)
}