Храните данные Vue в локальном хранилище с помощью Vuex

Когда речь идет о хранении данных, существуют различные способы сохранения данных.

Один из них очень прост, он идеально подходит для прототипов и хранит данные с помощью API веб-хранилища: localStorage и sessionStorage.

Используя Vue, вы можете использовать этот API многими способами. Один из самых простых – полагаться на библиотеку vuex-persist .

Вы устанавливаете его с помощью npm или Yarn:

npm install vuex-persist

#or
yarn add vuex-persist

Откройте файл хранилища Vuex и добавьте:

import VuexPersist from 'vuex-persist'

Инициализировать VuexPersist:

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

ключ – это ключ, который используется в базе данных локального хранилища.

Измените локальное хранилище на sessionStorage , чтобы использовать эту другую систему хранения (у каждой есть свои особенности, см. Документ API веб-хранилища, на который я ссылался выше).

Далее добавьте vuexPersist в список плагинов Vuex при инициализации магазина:

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

Вот и все! Каждый раз, когда хранилище изменяется, библиотека сохраняет его в браузере.

Существуют более продвинутые возможности, о которых вы можете узнать в официальной документации , но это основы для начала работы.

Оригинал: “https://flaviocopes.com/vuex-persist-localstorage/”