有没有办法在Vuejs'观察'本地存储？

Question

我正在尝试关注本地存储:

模板:

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

脚本:

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

但是当token变化时它不会改变.仅在刷新页面后.

有没有办法在不使用Vuex或状态管理的情况下解决这个问题？

Answer 1

当然可以!我认为最好的做法是使用getter/setter语法来包装localstorage.

这是一个工作示例:

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.

Answer 2

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,
  }
}

Answer 3

如果要避免样板化（getter / setter语法），请使用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像在普通Vue应用中一样使用。

该插件基本上是watcher和localStorage.set。您可以在此处阅读代码。它

1. 添加一个mixin以initialState在所有Vue实例中可用，并且
2. 监视更改并将其存储。

免责声明：我是vue-persistent-state的作者。

Answer 4

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 将不会做出反应。