Vue: Comment utiliser localStorage avec vue ?

Créé le 16 déc. 2015 · 3Commentaires · Source: vuejs/vue

J'ai posté sur le chat (deux fois), personne n'a répondu, alors j'espère pouvoir obtenir de l'aide ici.

J'ai un mixin isLoggedIn() qui renvoie true si l'élément est présent dans localStorage et false s'il ne l'est pas.
Ma question est la suivante: comment puis-je réévaluer l'état lorsque je mets à jour ou supprime un élément de localStorage, car j'ai certains éléments affichés uniquement si isLoggedIn est vrai?

Et est-il juste d'utiliser v-show="isLoggedIn()" ou suggéreriez-vous autre chose, je ne sais pas quelle est la meilleure pratique pour cela ?

Merci les gars.

Source

seemsindie

👍4

Commentaire le plus utile

Le problème ici est que localStorage n'est pas réactif, vous avez donc besoin de quelque chose de réactif pour déclencher les modifications. Fondamentalement, vous utilisez un objet pour représenter l'état de connexion, et lorsque vous vous connectez/déconnectez, vous modifiez localStorage et cet objet ensemble (et initialisez cet objet en lisant à partir de localStorage lors du chargement de l'application).

Voir http://vuejs.org/guide/application.html#State_Management
et https://auth0.com/blog/2015/11/13/build-an-app-with-vuejs/ qui fait exactement ce que vous essayez de faire.

yyx990803 le 16 déc. 2015

👍24 😕7

Tous les 3 commentaires

Voir http://vuejs.org/guide/application.html#State_Management
et https://auth0.com/blog/2015/11/13/build-an-app-with-vuejs/ qui fait exactement ce que vous essayez de faire.

yyx990803 le 16 déc. 2015

👍24 😕7

@ yyx990803 Merci mec, cet article est exactement ce que j'essaie de faire.

seemsindie le 17 déc. 2015

Quel est le meilleur endroit pour vérifier le stockage local lors de l'initialisation de l'application pour voir si l'utilisateur s'est déjà connecté depuis une session précédente ? Dans le tutoriel référencé, ils ont juste une ligne dans le fichier de démarrage / main.js avant l'initialisation de Vue. J'ai fait quelque chose de similaire . Est-ce recommandé ?