使用 Vue.js 跨浏览器选项卡的反应式 localStorage 对象答案

【问题标题】：Reactive localStorage object across browser tabs using Vue.js使用 Vue.js 跨浏览器选项卡的反应式 localStorage 对象
【发布时间】：2019-03-17 18:05:47
【问题描述】：

我正在尝试使 localStorage 对象具有反应性，这样如果它更新，它也会在使用同一对象的其他选项卡中更新。我正在使用 Vue.js 并尝试创建一个返回 localStorage 对象的计算属性，但这不起作用。如何使对象具有反应性并使其也在其他浏览器选项卡中更新？

computed: {
  localStorageObject() {
    return JSON.parse(localStorage.getItem('object'));
  }
}

【问题讨论】：

标签： vue.js vuejs2 local-storage

【解决方案1】：

@Matthias 有一个答案的开头，但它不会对其他选项卡中的更改做出反应。为此，您可以处理StorageEvent。这是一个粗略的草图，您可以根据需要进行增强。

const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  methods: {
    onStorageUpdate(event) {
      if (event.key === "name") {
        this.name = event.newValue;
      }
    }
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
    window.addEventListener("storage", this.onStorageUpdate);
  },
  beforeDestroy() {
    window.removeEventListener("storage", this.onStorageUpdate);
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});

【讨论】：

【解决方案2】：

在 Vue.js 食谱页面上有一个如何实现这一点的示例：https://vuejs.org/v2/cookbook/client-side-storage.html

在示例中，name 存储在本地存储中。

const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
        if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});

【讨论】：

也许在文档/窗口上添加一个focus 事件侦听器，它与上面示例中的mounted 部分相同？编辑：没关系，刚刚意识到已经有答案了