javascript - 有没有办法在 Vuejs 中将 'watch' 用于本地存储？

Question

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

模板:

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

脚本:

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

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

有没有办法不使用 Vuex 或状态管理来解决这个问题？

Answer 1

localStorage 不是响应式(Reactive)的，但我需要“观察”它，因为我的应用程序使用 localstorage 并且不想重写所有内容所以这是我使用 CustomEvent.

每当您向存储中添加内容时，我都会发送一个CustomEvent

localStorage.setItem('foo-key', 'data to store')

window.dispatchEvent(new CustomEvent('foo-key-localstorage-changed', {
  detail: {
    storage: localStorage.getItem('foo-key')
  }
}));

然后在任何需要观看它的地方:

mounted() {
  window.addEventListener('foo-key-localstorage-changed', (event) => {
    this.data = event.detail.storage;
  });
},
data() {
  return {
    data: null,
  }
}