web-dev-qa-db-fra.com

Existe-t-il un moyen de «surveiller» le stockage local dans Vuejs?

J'essaie de surveiller le stockage local:

Modèle:

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

Scénario:

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

Mais cela ne change pas lorsque token change. Uniquement après avoir actualisé la page.

Existe-t-il un moyen de résoudre ce problème sans utiliser Vuex ou la gestion d'état?

javascriptvue.jsvuejs2vue-componentvue-resource
14
artem0071

Chose sûre! À mon avis, la meilleure pratique consiste à utiliser la syntaxe getter / setter pour encapsuler le stockage local.

Voici un exemple de travail:

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

Et un JSFiddle .

14
Cobaltway

Si vous voulez éviter le passe-partout (syntaxe getter/setter), utilisez vue-persistent-state pour obtenir un état persistant réactif.

Par exemple:

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 est désormais disponible en tant que données dans tous les composants et Vue instances. Toute modification de this.token sera stocké dans localStorage, et vous pouvez utiliser this.token comme vous le feriez dans une application Vanilla Vue.

Le plugin est essentiellement watcher et localStorage.set. Vous pouvez lire le code ici . Il

  1. ajoute un mixin pour rendre initialState disponible dans toutes les instances Vue, et
  2. surveille les changements et les stocke.

Avertissement : je suis l'auteur de vue-persistent-state .

5
arve0

Le site VueJs a une page à ce sujet. https://vuejs.org/v2/cookbook/client-side-storage.html

Ils en donnent un exemple. Compte tenu de ce modèle html

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

Ils fournissent cette utilisation de la méthode du cycle de vie mounted et d'un observateur.

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

La méthode mounted vous assure que name est défini à partir du stockage local s'il existe déjà, et l'observateur permet à votre composant de réagir chaque fois que le nom dans le stockage local est modifié. Cela fonctionne bien lorsque des données dans le stockage local sont ajoutées ou modifiées, mais Vue ne réagira pas si quelqu'un efface manuellement leur stockage local.

2
Lucas Morgan

vous pouvez le faire de deux manières,

  1. en utilisant vue-ls puis en ajoutant l'écouteur sur les clés de stockage, avec

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

    ou

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

  2. en utilisant l'écouteur d'événements de stockage du DOM:

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