Я учил себя Vue в течение последних нескольких лет, и недавно мне действительно понравилось использовать Vuex для управления состоянием.

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

Раньше я использовал плагины Vuex, но никогда не делал их. Вы должны учиться на практике, так что давайте!

Настройте плагин и экспортируйте его

Давайте создадим новый файл js и плагин! Оказывается, это очень просто. Вот как вы создаете плагин:

const VuexLocalStorage = (store) => {
  // Plugin goes here!
}
export default VuexLocalStorage;

Зарегистрируйте плагин Vuex!

Вернувшись в наш магазин Vuex, нам нужно убедиться, что мы ссылаемся на него:

import VuexLocalStorage from "./modules/VuexLocalStorage.js"
const store = new Vuex.Store({
  plugins: [VuexLocalStorage]
});

Проверить наличие локального хранилища

В Modernizr есть отличная localStorage проверка, которую я использовал:

let localStorageAvailable = () => {
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}
const VuexLocalStorage = (store) => {
if( ! localStorageAvailable() ){
    return false;
  }
  ...

Если при загрузке приложения что-то находится в хранилище, загрузите это

let setupLocalStorage = (store) => {
  let previous = localStorage.getItem('app');
  if(previous){
    store.replaceState(JSON.parse(previous));
  }
}
const VuexLocalStorage = (store) => {
  if( ! localStorageAvailable() ){
    return false;
  }
  setupLocalStorage();

Это store.replaceState заменяет состояние. Я скопировал его прямо из Vuex API. Если вы собираетесь создать плагин, это отличное место для начала, поскольку он показывает вам все методы, которые вы можете вызвать в своем магазине в своем плагине:

Https://vuex.vuejs.org/api/

Предупреждение !! Не используйте replaceState, как у меня здесь, во время разработки, так как… ну, если вы внесете какие-либо изменения в структуру своего состояния, оно будет перезаписано предыдущим, как только страница загрузится. Он должен быть заключен в какое-то подтверждение, например «Загрузить предыдущее состояние?»

Боковое примечание: противодействие

Я делаю приложение, немного похожее на Medium, и не хочу обновлять локальное хранилище при каждом нажатии клавиши. Чтобы этого не произошло, мы должны это отменить. Итак, я импортирую lodash и собираюсь сделать это:

import debounce from "lodash/debounce"
let debouncedUpdate = debounce((state) => {
  localStorage.setItem('app', JSON.stringify(state));
}, 200)

Переход к состоянию Vuex

Наконец, нам нужно запустить эту функцию. Возвращаясь к документации Vuex API и образцу документации плагина, мы можем использовать store.subscribe для получения каждого отдельного обновления:

const VuexLocalStorage = (store) => {
  if( ! localStorageAvailable() ){
    return false;
  }
  setupLocalStorage(store);
  store.subscribe((mutation, state) => {
    debouncedUpdate(state);
  })
}

Вот и все, ребята! Вы можете увидеть весь файл плагина здесь:

Https://gist.github.com/djave-co/f5df078e84870a87e925cc6d4b626e3d