web-dev-qa-db-ja.com

Vuejsのローカルストレージを「監視」する方法はありますか？

私はローカルストレージを監視しようとしています：

テンプレート：

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

スクリプト：

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

ただし、tokenが変更されても変更されません。ページを更新した後にのみ。

Vuexまたは状態管理を使用せずにこれを解決する方法はありますか？

javascriptvue.jsvuejs2vue-componentvue-resource
14
artem0071

確実なこと！私の意見では、ベストプラクティスは 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 。

14
Cobaltway

ボイラープレート（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バニラVueアプリでのように。

プラグインは基本的にウォッチャーであり、localStorage.set。コードを読むことができます here 。それ

  1. mixin を追加して、すべてのVueインスタンスでinitialStateを使用可能にします。
  2. 変更を監視して保存します。

免責事項：私は vue-persistent-state の著者です。

5
arve0

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は反応しません。

2
Lucas Morgan

あなたは2つの方法でそれを行うことができます、

  1. vue-ls を使用し、ストレージキーにリスナーを追加して、

        Vue.ls.on('token', callback)

    または

        this.$ls.on('token', callback)

  2. dOMのストレージイベントリスナーを使用して：

        document.addEventListener('storage', storageListenerMethod);
0
Yash Ojha