访问从axios创建的计算值在vue中获取请求

Question

我正在尝试访问为 get request.I 创建的计算值，并在数据中将此 classroomBackground 声明为字符串。

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

}
}

在计算值中，我正在做一些计算并设置 classroomBackground 值

  computed: {
   background: {
      get(): string {
        if (condition) {
          return 'value1';
        } if (condition) {
          return "value2";
        }
        return ' ';
      },
      set(value:string) {
        this.background = value;
        this.classroomBackground = value;
      },
    },
},

我试图在计算得到时这样做：

this.classroomBackground = 'somevalue1'; 
 return this.classroomBackground;

我在 eslint 中遇到这个错误：

unexpected side effect in "background" computed property

在post方法中，我从计算值

发送数据

方法：{

 async onSaveClickSave() {
    try {
        const settings = {
          classroomBackground: this.background,
        };

        await axios.post<{ api }>('api');

      } catch (e) {
        handleAxiosError(e);
      }

}

在我尝试获取数据时保存值后，该值没有出现在我的输入框中。

     async created() {
    try {
      const settingsResponse = await axios.get<{ api }>('api');
      const { settings } = settingsResponse.data;
      this.background = settings.classroomBackground;
      //this.classroomBackground = settings.classroomBackground;
    } catch (e) {
      handleAxiosError(e);
    }
  },

这是我的模板：

<div class="d-flex">
            <VTextField
              v-model="background"
            >
            </VTextField>
          </div>

这是沙盒的一部分 link，您可以在其中了解计算 part.Later 我必须根据下拉列表的值添加一些条件：https://codesandbox.io/s/clever-platform-dyrv7?file=/src/App.vue

在尝试恢复计算中的数据时出现此错误：虽然急于恢复数据，但我在计算 Error in v-on handler: RangeError: Maximum call stack size exceeded

中收到此错误

我想将计算值存储在一些数据中属性，然后通过清空我从数据库中检索到的整个字符串来恢复和更新它

如何访问在 get 中创建的计算值 request.How 我可以这样做吗？

Answer 1

请提供组件的完整代码，显然 computed.background.get() 无效：它使用未知变量 condition 并且不会被计算

也许您想做这样的事情：

    computed: {
       background: {
          get(): string {
            return this.classroomBackground
          },
          set(value:string) {
            this.classroomBackground = value;
          },
        },
    },

保存和恢复状态

    methods: {
        save() {
          window.localStorage.setItem("bg", this.classroomBackground);
        },
        restore() {
          this.classroomBackground = window.localStorage.getItem("bg")
        }
    },
    created() {
        this.resore()
    }

CodeSand box for computed with get and set

在您的代码框示例中，还有另一个版本的计算背景


    computed: {
      background() {
        return `linear-gradient(${this.degree}deg, ${this.colors.join(", ")})`;
      }
    }

这个计算很难解构为原始参数，你必须编写解析器来提取度数和颜色，如果它来自文本输入，你的解析器将在“#cccccc”上中断。

因此最好将计算视为只读值，或单向值：您只能写入度数和颜色，

要保存和恢复此类计算，您需要保存和恢复所有下划线值


    save() {
      window.localStorage.setItem("bgColors", JSON.stringify(this.colors));
      window.localStorage.setItem("bgDegree", this.degree);
    },
    restore() {
      this.$set(
        this,
        "colors",
        JSON.parse(window.localStorage.getItem("bgColors") || "[]")
      );
      this.degree = parseInt(window.localStorage.getItem("bgDegree"), 10) || 0;
    },

CodeSandBox for complex computed

如果你想将整个计算的背景存储到数据库中，你可以这样做：

 save() {
      window.localStorage.setItem("bgFull", JSON.stringify(this.backgound));
    
    },
 restore() {
      this.storedBackgound  = window.localStorage.getItem("bgFull")
 
    },

但恢复是对另一个变量完成的，稍后您需要使用它来计算背景

computed: {
   background() {
      if(this.colors.length){
         return ...computed from colors...
      }
      if(this.storedBackgound){
         return this.storedBackgound
      }
      //default
   }
}

但这只是一个示例，您可以通过其他方式处理默认值、恢复值

访问从axios创建的计算值在vue中获取请求

Accesing computed value in created from axios get request in vue

lifecycle

typescript

vue.js