Vuex store state如何混合函数与变量实现一键部分重置状态值

方案1：拆分默认状态定义（逻辑最简洁） #

你之前的写法核心问题是state初始化时没有正确合并固定保留变量和可重置变量，修正后即可实现需求：

// 仅定义需要重置的状态的默认值
const getDefaultState = () => {
    return {
        showModal: false,
        nodeInfo: [],
    }
}

// 初始化state：合并不需要重置的nodeCounter + 可重置的默认状态
export const state = () => ({
    nodeCounter: 0,
    ...getDefaultState()
})

export const mutations = {
  resetState (state) {
    // getDefaultState返回值不含nodeCounter，assign时不会覆盖该属性
    Object.assign(state, getDefaultState())
  },
  // 原有修改nodeCounter的逻辑正常保留即可
  incrementCounter(state) {
    state.nodeCounter++
  }
}

这种方案逻辑最直白，后续新增需要重置的状态只要加到getDefaultState里即可，无需修改重置逻辑。

方案2：无侵入修改原有逻辑（无需调整getDefaultState结构） #

如果你不想拆分原有全量默认状态的定义，只需要在重置时先暂存要保留的变量，重置完成后再赋值回去即可：

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

export const state = () => getDefaultState()

export const mutations = {
  resetState (state) {
    // 暂存需要保留的变量
    const keepValues = { nodeCounter: state.nodeCounter }
    // 全量重置到默认值
    Object.assign(state, getDefaultState())
    // 还原保留变量
    Object.assign(state, keepValues)
  },
}

后续如果需要新增保留的变量，只需要往keepValues里加对应属性即可，不需要逐个写重置逻辑。

内容的提问来源于stack exchange，提问作者BATMAN_2008