Vuex store state : how to mix the function with variables for reseting state values at single shot

Question

I have a Vuex Store where I need to reset the variables based on some changes within the application so I am using something like this and everything is working as expected:

const getDefaultState = () => {
    return {
        showModal: false,
        nodeCounter:0,
        nodeInfo: [],
    }
}

export const state = () => getDefaultState()

export const mutations = {
  resetState (state) {
    // Reset all state variables to its default value for next node
    Object.assign(state, getDefaultState())
  },
}

However, as per the new requirement, I do not wish to reset the nodeCounter and want it to have the incremental value but reset all other values so I would like to do something like this:

const getDefaultState = () => {
    return {
        showModal: false,
        nodeInfo: [],
    }
}

export const state = () => {
    nodeCounter:0,
    getDefaultState()
}

So all my other values will be reset but the nodeCounter would be reset only when I refresh the application. But I am unable to achieve this.

Can someone please let me know how can I reset some of the state variables and do not reset some of them? I do not wish to reset the state variable one by one so I am using the function approach as mentioned in some of the answers here.

Answer 1

I would try to save the state of nodeCounter (which you want to preserve) and then set it, after you set the state to default. Something like this:

const getDefaultState = () => {
    return {
        showModal: false,
        nodeCounter:0,
        nodeInfo: [],
    }
}

export const state = () => getDefaultState()

export const mutations = {
  resetState (state) {
    // Reset all state variables to its default value for next node
    const tmpNodeCounter = state.nodeCounter;
    state = {...getDefaultState(),nodeCounter: tmpNodeCounter};
  },
}