Vue.js中如何简化使用switch实现步骤状态更新的代码

现有代码隐藏问题 #

你编写的switch逻辑存在bug：case 2到case 5的else分支都错误修改了stepOneIsCompleted，而非对应步骤的状态，优化时需先修正该问题。

方案1：数组存储状态（推荐，符合你的需求） #

完全可以用数组存储状态，后续维护、传props都更便捷，改造如下：

改造data定义 #

data() {
  return {
    // 数组索引对应步骤序号减1，初始值全为未完成
    stepCompletedStatus: new Array(5).fill(false)
  };
},

改造更新方法 #

无需switch，一行代码完成赋值：

updateViewEditVisibility(step, status) {
  this.stepCompletedStatus[step - 1] = status === 200;
}

传props适配 #

如果原有子组件需要单独接收每个步骤的状态，直接按索引取值传递即可：

<child-component
  :step-one-is-completed="stepCompletedStatus[0]"
  :step-two-is-completed="stepCompletedStatus[1]"
  :step-three-is-completed="stepCompletedStatus[2]"
  :step-four-is-completed="stepCompletedStatus[3]"
  :step-five-is-completed="stepCompletedStatus[4]"
/>

如果子组件可调整，直接把整个stepCompletedStatus数组作为props传递，后续新增步骤无需修改props定义，可扩展性更强。

方案2：不修改原有状态定义的优化方案 #

如果现有项目中已经大量使用了原来的5个独立状态变量，不想批量修改引用，可通过动态拼接键名的方式消除switch冗余：

updateViewEditVisibility(step, status) {
  const stepNameMap = ['One', 'Two', 'Three', 'Four', 'Five']
  const stateKey = `step${stepNameMap[step - 1]}IsCompleted`
  this[stateKey] = status === 200
}

对现有业务代码侵入性极低，同样能实现冗余逻辑的简化。

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