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

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 变量以查看此状态将被重置每次次。

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

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

vue.js

vuex

vuejs2

nuxt.js

vuex-modules