Я учил себя 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. Если вы собираетесь создать плагин, это отличное место для начала, поскольку он показывает вам все методы, которые вы можете вызвать в своем магазине в своем плагине:
Предупреждение !! Не используйте 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