Vue.js中更新setter/getter实现开关按钮重置功能技术咨询

是否可以通过更新getter/setter实现需求？ #

可以，调整计算属性checkedValue的getter/setter逻辑即可实现，同时能优化状态同步的一致性。

现有代码问题分析 #

当前checkedValue的getter直接返回props传入的defaultState，和子组件内部维护的实际开关状态currentState没有关联，导致视图绑定的状态源和实际操作的状态源不一致。

具体调整方案 #

子组件代码调整 #

props: {
  defaultState: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: 'primary'
  }
},
data() {
  return {
    currentState: this.defaultState
  };
},
computed: {
  isActive() {
    return this.currentState;
  },
  checkedValue: {
    // *调整getter：返回内部维护的实际状态，保证视图和状态一致*
    get() {
      return this.currentState;
    },
    set(newValue) {
      this.currentState = newValue;
      this.$emit('change', newValue);
    }
  }
},
methods: {
  reset() {
    // *直接给计算属性赋值，触发setter自动同步状态，如需重置时通知父组件则用该写法*
    this.checkedValue = this.defaultState;
    // 若重置不需要触发change事件，可直接修改内部状态：this.currentState = this.defaultState
  }
}

父组件逻辑无需改动 #

原有重置按钮的$refs.toggleOrder.reset($event)调用可以正常生效，点击后开关会自动恢复为传入的defaultState默认值。

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