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

Posted 2023-02-16

【中文标题】Vuex 存储状态：如何将函数与变量混合以单次重置状态值

【英文标题】：Vuex store state : how to mix the function with variables for reseting state values at single shot

【发布时间】：2021-12-28 13:10:27

【问题描述】：

我有一个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 方法。

【参考方案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;
  ,

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

【讨论】：

非常感谢您的回复。当我在我的应用程序中使用类似的方法时，由于某种原因它失败了。不知道为什么。所以我使用了在重置然后重新分配之前跟踪变量的方法。