How to get the lastest number without refresh in another component-CodePudding

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

CodePudding user response：

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