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

user_7584240 0
Viewed 166

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.

vuex-modules vuejs2 nuxt.js vuex vue.js
2 Answers

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};
  },
}
user_38164120

If you want to reset only some values in the state with a mutation you do not need to include all state variables in your resetState mutation. you could define another object for variables that must be reset each time. here is my Nuxt store file called change.js:

const getDefaultState =  {
  showModal: false,
  nodeCounter:0,
  nodeInfo: [],
}

const alwaysReset = {
  showModal: false,
  nodeInfo: [],
}

export const state = () => (getDefaultState);

export const mutations = {
  resetState (state) {
    // Reset state variables that must be reset each time and not all state
    Object.assign(state, alwaysReset);
  },

  increment (state) {
    console.log(state.nodeCounter);
    state.nodeCounter++;
  },

  pushArr (state) {
    console.log(state.nodeInfo);
    state.nodeInfo.push("item");
  }
}

The alwaysReset object only includes variables that you want to reset each time. other mutations were created to test my answer with this Nuxt page for example:

<template>
  <v-container fluid>
    <v-row>
      <v-col>
        <v-card
          class="pa-2"
          outlined
          tile
        >
          <div>this is a page</div>
          <v-btn @click = "changeState">click</v-btn>
          <v-btn @click = "incrementState">increment</v-btn>
          <v-btn @click = "arrayState">push</v-btn>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    methods: {
      changeState: function() {
        this.$store.commit('change/resetState');
      },

      incrementState: function() {
        this.$store.commit('change/increment');
      },

      arrayState: function() {
        this.$store.commit('change/pushArr');
      }
    }
  }
</script>

Here I created 3 buttons. one of them resets the specified variables. another one increment the nodeCounter to see that with reset this state does not change. finally the third one pushes items to nodeInfo variable to see that this state will be reset each time.

user_137709360
Related