Vuex 存储状态：如何将函数与变量混合以单次重置状态值

Question

我有一个Vuex Store，我需要根据应用程序中的一些更改来重置变量，所以我正在使用这样的东西并且一切都按预期工作：

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())
  },
}

但是，根据新要求，我不希望重置 nodeCounter 并希望它具有增量值但 reset 所有其他值所以我想做这样的事情：

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

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

所以我的所有其他值都是reset，但nodeCounter 只有在我刷新应用程序时才会被重置。但我无法做到这一点。

谁能告诉我如何重置一些state 变量而不重置其中一些？我不希望一一重置状态变量，所以我使用这里的一些答案中提到的function 方法。

Answer 1

在将状态设置为默认值后，我会尝试保存 nodeCounter 的状态（您想要保留）然后设置它。像这样的：

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

Answer 2

如果您只想重置具有突变的状态中的一些值，则无需在 resetState 突变中包含所有状态变量。您可以为每次必须重置的变量定义另一个对象。这是我的 Nuxt 存储文件，名为 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");
  }
}

alwaysReset 对象仅包含您每次要重置的变量。创建了其他突变来测试我使用此 Nuxt 页面的答案，例如：

<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>

在这里我创建了 3 个按钮。其中之一重置指定的变量。另一个增加nodeCounter 以查看重置此状态不会改变。最后第三个将项目推送到nodeInfo 变量以查看此状态将被重置每次。