I am trying to access the computed value in created for get request.I have this classroomBackground declared in data as string.

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

}
}

In computed value i am doing some calculation and setting the classroomBackground value

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

i tried to do this in computed get:

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

i am getting this error in eslint:

unexpected side effect in "background" computed property

In post method i am sending the data from computed value

methods: {

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

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

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

}

After saving value while i try to get the data the value is not appearing in my input box.

     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);
    }
  },

this is my template:

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

This is the partial part of the sandbox link where you can get the idea of computed part.Later i had to add some condition according to the value of a dropdown: https://codesandbox.io/s/clever-platform-dyrv7?file=/src/App.vue

While trying to restore the data in computed i am getting this error: while iry to restore the data i am getting this error in computed Error in v-on handler: RangeError: Maximum call stack size exceeded

How can i access the computed value in created in get request.How can i do this?

CodePudding user response：

Please provide full code of the component, obviously computed.background.get() is invalid: it uses unknown var condition and will be not computed

Maybe you wanted to do something like that:

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

to save and restore state

    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

In your codebox example, there's another version of computed background

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

this computed is hard deconstruct to original parameters, you have to write parser to extract degree and colors, and your parser will break on "#cccccc" if it comes through the text input.

so it is better to think computed as read only value, or one way value: you can write only to degree and colors,

For saving and restoring such computed you need to save and restore all underlining values

    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