11 Июля 2018 JavaScript Перевод

Хранение данных Vue в localStorage используя Vuex

img

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

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

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

Установите её с помощью npm или yarn:

npm install vuex-persist --save
#или
yarn add vuex-persist

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

import VuexPersist from 'vuex-persist'

Инициализируйте VuexPersist:

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

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

Измените localStorage на sessionStorage, чтобы использовать другую систему хранения (каждая из них имеет свои особенности, смотрите документацию Web Storage API).

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

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

Вот и всё! При каждом изменении хранилища библиотека будет сохранять данные в браузере.

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

Оригинал: Store Vue data to localStorage using Vuex