Реактивный объект localStorage на вкладках браузера с помощью Vue.js

Question

Я пытаюсь сделать объект localStorage реактивным, чтобы в случае его обновления он также обновлялся на других вкладках, используя этот же объект.Я использую Vue.js и пытался создать вычисляемое свойство, которое возвращает объект localStorage, но это не работает.Как сделать объект реактивным и обновить его на других вкладках браузера?

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

Answer 1

@ Матиас имеет начало ответа, но не реагирует на изменения в других вкладках.Для этого вы можете обработать 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

В этом примере name хранится в локальном хранилище.

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