Apprenez à stocker automatiquement les données Vuex sur localStorage ou sessionStorage
Lorsque vous parlez de stockage de données, il existe différentes manières de conserver les données.
L'un est très simple, il est parfait pour les prototypes, et il stocke les données en utilisant leAPI de stockage Web: localStorage et sessionStorage.
En utilisant Vue, vous pouvez utiliser cette API de plusieurs manières. L'un des plus simples est de s'appuyer sur levuex-persist
bibliothèque.
Vous l'installez en utilisant npm ou Yarn:
npm install vuex-persist
#or
yarn add vuex-persist
Ouvrez le fichier de magasin Vuex et ajoutez:
import VuexPersist from 'vuex-persist'
Initialisez VuexPersist:
const vuexPersist = new VuexPersist({
key: 'my-app',
storage: window.localStorage
})
key
est la clé utilisée dans la base de données localStorage.
ChangementlocalStorage
avecsessionStorage
pour utiliser cet autre système de stockage (chacun a ses propres particularités, voir le document de l'API Web Storage que j'ai lié ci-dessus).
Ensuite, ajoutezvuexPersist
à la liste des plugins Vuex, lors de l'initialisation du magasin:
const store = new Vuex.Store({
//...initialization
plugins: [vuexPersist.plugin]
})
C'est tout! Chaque fois que le magasin est modifié, la bibliothèque le conservera dans le navigateur.
Il existe des fonctionnalités plus avancées que vous pouvez découvrir sur ledocumentation officielle, mais ce sont les bases pour vous aider à démarrer.
Téléchargez mon gratuitManuel de Vue
Plus de tutoriels vue:
- Un aperçu de Vue.js
- La CLI Vue.js: apprenez à l'utiliser
- Les DevTools Vue.js
- Configurer VS Code pour le développement Vue
- Créez votre première application avec Vue.js
- Composants de fichier unique Vue.js
- Modèles et interpolations Vue.js
- Directives Vue.js
- Méthodes Vue.js
- Propriétés calculées Vue.js
- Styliser les composants Vue.js à l'aide de CSS
- Observateurs Vue.js
- Méthodes Vue vs observateurs vs propriétés calculées
- Filtres Vue.js
- Composants Vue.js
- Machines à sous Vue.js
- Accessoires de composants Vue.js
- Événements Vue.js
- Communication des composants Vue.js
- Vuex, le gestionnaire d'état de Vue.js
- Vue, utilisez un composant à l'intérieur d'un autre composant
- Vue, comment utiliser un accessoire comme nom de classe
- Comment utiliser SCSS avec les composants de fichier unique Vue.js
- Utilisation de Tailwind avec Vue.js
- Le routeur Vue
- Afficher dynamiquement un composant Vue
- La feuille de triche Vue.js
- Stocker les données Vue sur localStorage à l'aide de Vuex
- Comment appliquer dynamiquement une classe à l'aide de Vue
- Vue, comment utiliser v-model
- Vue, pourquoi les données doivent être une fonction
- Roadmap to become a Vue.js developer in 2020