Stocker les données Vue sur localStorage à l'aide de Vuex

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-persistbibliothè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
})

keyest la clé utilisée dans la base de données localStorage.

ChangementlocalStorageavecsessionStoragepour 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

Stocker les données Vue sur localStorage à l'aide de Vuex

Apprenez à stocker automatiquement les données Vuex sur localStorage ou sessionStorage

Plus de tutoriels vue: