Vue中如何在created钩子的axios get请求中访问computed计算属性

现有问题根因 #

• 栈溢出错误：set方法中this.background = value会反复触发setter形成死循环，最终调用栈超出上限
• 输入框无回显：原getter逻辑完全依赖自定义condition，未关联data中的classroomBackground变量，赋值后getter返回值不会同步更新
• ESLint报错：computed的getter设计为纯计算函数，不允许修改响应式变量这类副作用操作

正确实现代码 #

1. data部分保持原有写法即可 #

data() {
    return {
      classroomBackground: '' as string,
    }
}

2. 修正后的computed配置 #

computed: {
  background: {
    get(): string {
      // 优先返回接口存储/用户手动修改的值，无值则走原有条件判断逻辑
      if (this.classroomBackground) {
        return this.classroomBackground
      }
      // 保留你原本的条件判断规则
      if (condition1) {
        return 'value1';
      } 
      if (condition2) {
        return 'value2';
      }
      return ' ';
    },
    set(value: string) {
      // 仅修改data中的变量即可，不要给computed自身赋值
      this.classroomBackground = value;
    },
  },
},

3. created钩子无需修改，原有逻辑可正常运行 #

赋值this.background = settings.classroomBackground会触发setter写入classroomBackground，getter会优先返回该值，VTextField会自动同步回显 #

功能验证说明 #

• 接口返回配置后输入框可正常回显存储的配置值
• 手动修改输入框内容会自动同步到classroomBackground，提交POST请求时直接取this.background即可
• 清空输入框时classroomBackground为空，getter会自动回退到原有条件判断的默认值

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