Есть ли способ "смотреть" на localstorage в Vuejs?

Я пытаюсь наблюдать за localstorage:

Шаблон:

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

Script:

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

Но это не изменяется, когда token изменяется. Только после обновления страницы.

Есть ли способ решить эту проблему без использования Vuex или управления состоянием?

Ответ 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.

Ответ 2

Если вы хотите избежать шаблонов (синтаксис getter/setter-syntax), используйте vue-persistent-state для получения реактивного постоянного состояния.

Например:

import persistentState from 'vue-persistent-state';  

const initialState = {
  token: ''  // will get value from localStorage if found there
};
Vue.use(persistentState, initialState);

new Vue({
  template: '<p>token - {{token}}</p>'
})

Теперь token доступен в виде данных во всех компонентах и экземплярах Vue. Любые изменения в this.token будут храниться в localStorage, и вы можете использовать this.token как в приложении vanilla Vue.

Плагин в основном watcher и localStorage.set. Вы можете прочитать код здесь. Это

добавляет миксин, чтобы сделать initialState доступным во всех экземплярах Vue, и
следит за изменениями и хранит их.

Отказ от ответственности: я автор vue-persistent-state.

Ответ 3

На сайте VueJs есть страница об этом. https://vuejs.org/v2/cookbook/client-side-storage.html

Они предоставляют пример. Учитывая этот HTML шаблон

<template>
  <div id="app">
    My name is <input v-model="name">
  </div>
<template>

Они предоставляют это использование метода, mounted на протяжении жизненного цикла, и наблюдателя.

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

mounted метод гарантирует, что name установлено из локального хранилища, если оно уже существует, и наблюдатель позволяет вашему компоненту реагировать всякий раз, когда имя в локальном хранилище изменяется. Это хорошо работает, когда данные в локальном хранилище добавляются или изменяются, но Vue не будет реагировать, если кто-то стирает их локальное хранилище вручную.

Ответ 4

Вы можете сделать это двумя способами,

с помощью vue-ls, а затем добавив слушателя на ключи хранения, с
```
    Vue.ls.on('token', callback)
```
или же
```
    this.$ls.on('token', callback)
```
с помощью обработчика событий хранилища DOM:
```
    document.addEventListener('storage', storageListenerMethod);
```