有没有办法在 Vuejs 中“观察”本地存储？

Question

我正在尝试查看本地存储：

模板：

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

脚本：

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

但它不会改变，当 token 改变时。只有在刷新页面后。

有没有办法在不使用 Vuex 或状态管理的情况下解决这个问题？

原文由 artem0071 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

确定的事！我认为最好的做法是使用 getter / setter 语法来包装本地存储。

这是一个工作示例：

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 。

原文由 FitzFish 发布，翻译遵循 CC BY-SA 3.0 许可协议