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

Узнайте, как автоматически сохранять данные Vuex в localStorage или sessionStorage

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

Один очень простой, он идеально подходит для прототипов и хранит данные с помощью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
})

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

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

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

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

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

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

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: