How to get the lastest number without refresh in another component

Question

There are two components current using Helloworld component save the value to localStorage and display the value from display from New component to display it. I tried using computed to get the data but it's still need to refresh to get the lastest value.

Here the example feel free to test or solve the problem >>> Example Sandbox

computed: {
token: {
  get: function () {
    return this.tokenValue;
  },
  set: function (id_token) {
    this.tokenValue = id_token;
    localStorage.setItem("Num1", id_token);
  },
},

},

Vue is not reactive to local storage. Vue has its own library `vuex` to manage the storage. https://vuex.vuejs.org/ — Neha Soni, Nov 25 '22 at 07:55
This answer might help you- https://stackoverflow.com/questions/56755906/computed-property-react-to-localstorage-change — Neha Soni, Nov 25 '22 at 07:56

score 1 · Accepted Answer · answered Nov 25 '22 at 08:01

1

You can dispatch custom event and listen to that event in other components.

So in HelloWorld.vue:

 addnum() {
   localStorage.setItem("Num1", this.number++);
   window.dispatchEvent(new CustomEvent('num-changed', {
     detail: {
       num: localStorage.getItem('Num1')
     }
   }));
 },

in New.vue:

mounted() {
  window.addEventListener('num-changed', (event) => {
    this.tokenvalue = event.detail.num;
  });
}

answered Nov 25 '22 at 08:01

Nikola Pavicevic

21,952
9
25
46

Thank you, for make this simple answer which take me 2 days to get the answer ^_^ – Meow Nov 25 '22 at 09:12

How to get the lastest number without refresh in another component

1 Answers1