有什么办法可以在Vuejs中“监视"本地存储吗? [英] Is there any way to 'watch' for localstorage in Vuejs?

问题描述

我正在尝试监视本地存储:

模板:

<p>token - {{token}}</p>

脚本:

computed: {
  token() {
    return localStorage.getItem('token');
  }
}

但是，当token更改时，它不会更改.仅在刷新页面后.

是否有一种无需使用Vuex或状态管理即可解决此问题的方法?

解决方案

当然！我认为最佳做法是使用 getter /设置语法来包装本地存储.

这是一个有效的示例:

HTML:

<div id="app">
  {{token}}
  <button @click="token++"> + </button>
</div>

JS:

new Vue({
  el: '#app',
  data: function() {
    return {
      get token() {
        return localStorage.getItem('token') || 0;
      },
      set token(value) {
        localStorage.setItem('token', value);
      }
    };
  }
});

还有 JSFiddle .

I'm attempting to watch for localstorage:

Template:

<p>token - {{token}}</p>

Script:

computed: {
  token() {
    return localStorage.getItem('token');
  }
}

But it doesn't change, when token changes. Only after refreshing the page.

Is there a way to solve this without using Vuex or state management?

解决方案

Sure thing! The best practice in my opinion is to use the getter / setter syntax to wrap the localstorage in.

Here is a working example:

HTML:

<div id="app">
  {{token}}
  <button @click="token++"> + </button>
</div>

JS:

new Vue({
  el: '#app',
  data: function() {
    return {
      get token() {
        return localStorage.getItem('token') || 0;
      },
      set token(value) {
        localStorage.setItem('token', value);
      }
    };
  }
});

And a JSFiddle.

这篇关于有什么办法可以在Vuejs中“监视"本地存储吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！