Use Vuex to store Vue data to localStorage

Learn how to automatically store Vuex data to localStorage or sessionStorage

When talking about storing data, there are multiple ways to retain data.

One is very simple, very suitable for prototypes, and usesWeb Storage API: LocalStorage and sessionStorage.

With Vue, you can use the API in a variety of ways. One of the easiest ways is to rely onvuex-persistlibrary.

You install it using npm or Yarn:

npm install vuex-persist
#or
yarn add vuex-persist

Open the Vuex storage file and add:

import VuexPersist from 'vuex-persist'

Initialize VuexPersist:

const vuexPersist = new VuexPersist({
  key: 'my-app',
  storage: window.localStorage
})

keyIs the key used in the localStorage database.

changelocalStoragewithsessionStorageTo use other storage systems (each storage system has its own characteristics, please refer to the Web Storage API document I linked above).

Next, addvuexPersistWhen initializing the store, go to the list of Vuex plugins:

const store = new Vuex.Store({
  //...initialization
  plugins: [vuexPersist.plugin]
})

That's it! Every time you change the store, the library will persist it to the browser.

You canOfficial documents, But these are the basis to get you started.

Download mine for freeVue manual

Use Vuex to store Vue data to localStorage

Learn how to automatically store Vuex data to localStorage or sessionStorage

More vue tutorials: