Question

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

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

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

Answer 2

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

在示例中，businessLayer.GetAll().ToList().Select( b => new DTO().InitInhertedProperties(b)).ToList();存储在本地存储中。

name

使用Vue.js在浏览器选项卡中反应性localStorage对象

2 个答案: