web-dev-qa-db-fra.com

Préserver l'état des composants avec vue-router?

J'ai un cas d'utilisation de liste/détail, où l'utilisateur peut double-cliquer sur un article dans une liste de produits, aller à l'écran de détail pour modifier, puis revenir à l'écran de liste une fois terminé. J'ai déjà fait cela en utilisant la technique des composants dynamiques décrite ici: https://vuejs.org/v2/guide/components.html#Dynamic-Components . Mais maintenant que je prévois d'utiliser vue-router ailleurs dans l'application, j'aimerais refactoriser cela pour utiliser le routage à la place. Avec ma technique de composants dynamiques, j'ai utilisé keep-alive pour m'assurer que lorsque l'utilisateur revenait à la vue liste, la même sélection était présente qu'avant l'édition. Mais il me semble qu'avec le routage, le composant de liste de produits serait restitué, ce qui n'est pas ce que je veux.

Maintenant, il semble que la vue du routeur puisse être enveloppée dans keep-alive, ce qui résoudrait un problème mais en introduirait beaucoup d'autres, car je veux seulement que cette route soit maintenue en vie, pas tous (et pour le moment j'utilise simplement un vue du routeur de niveau supérieur unique). Vue 2.1 a clairement fait quelque chose pour résoudre ce problème en introduisant des paramètres d'inclusion et d'exclusion pour router-view. Mais je ne veux pas vraiment le faire non plus, car il semble très maladroit de devoir déclarer à l'avant dans ma page principale toutes les routes qui devraient ou ne devraient pas utiliser keep-alive. Il serait bien plus simple de déclarer si je veux rester en vie au moment où je configure la route (c'est-à-dire dans le tableau des routes) Alors, quelle est ma meilleure option?

vue.jsvue-router
20
John Moore

Vous pouvez spécifier l'itinéraire que vous souhaitez conserver en vie, comme:

<keep-alive include="home">
  <router-view/>
</keep-alive>

Dans ce cas, seule la route du domicile sera maintenue en vie

10
Alex Garcia

Ce qui me semble, c'est que vous cherchez une sorte de gestion de l'état . Si vous avez des données qui sont partagées par plusieurs composants et que vous souhaitez rendre le composant dans un ordre différent, mais ne voulez pas charger à nouveau les données pour chaque composant.

Cela fonctionne comme suit:

enter image description here

Vue propose une gestion d'état simple , mais je recommanderai d'utiliser Vuex qui est un standard pour la gestion d'état parmi la communauté vue).

1
Saurabh

J'ai eu un problème similaire et j'ai regardé Vuex mais j'ai décidé qu'il faudrait trop de modifications/ajouts dans mon code pour ajouter au projet.

J'ai trouvé cette bibliothèque https://www.npmjs.com/package/vue-save-state qui a résolu le problème pour moi, en gardant l'état d'un composant synchronisé avec localStorage, et cela n'a pris qu'un quelques minutes et quelques lignes de code (toutes documentées dans la page Github du paquet).

1
user985366