CODEWITHSUNDEEP
vue.js
Yash Singhal
Yash Singhal

Reputation: 57

How to locally store a computed variable property once in data

I have a computed variable getting a value from the VUEX store. I only want to get this value once, and then save it locally into a variable so I can edit the said variable without doing any mutations on my store value. How can this be done?

Any help will be really appreciated.

Upvotes: 2

Views: 1088

Answers (2)

Yash Singhal
Yash Singhal

Reputation: 57

I ended up using something similar to the other answer:

      data() {
        return {
          LocalText: { type: String },
        }
      },
      computed: {
        ...mapGetters('store', ['storevar']),
        currentText: function () {
          return this.storevar
        },
      },
      created() {
        this.LocalText= this.currentText
      }

What I have done here is that I first made a new variable for the text to be locally stored - LocalText. I have also added a getter that gets the store variable from the store and a computed function that returns the value of the storevar. Finally, I have assigned the value of the storevar to my LocalText when the page is first created using the created() function.

Upvotes: 1

Nilson Jacques
Nilson Jacques

Reputation: 468

What you can do is create a computed property with a get and set method:

data() {
  return {
    myValueCopy: null
  }
},
computed: {
  myValue: {
    get() {
      if (this.myValueCopy === null) {
        return this.$store.getters.myValue;
      }
      return this.myValueCopy;
    }, 
    set(value) {
      this.myValueCopy = value;
    }
  }
}

If there's no local copy of the data return the store value, else return the copy. When setting the data, update the local copy not the store.

Upvotes: 1

Related Questions