Если вы знакомы с localStorage, то знаете, насколько он незаменим при создании одностраничных приложений (SAP). Это позволяет постоянно хранить данные в браузере, например. данные пользователя или корзину.

LocalStorage

LocalStorage позволяет хранить большой объем данных в хранилище вашего браузера без срока действия. Это означает, что если вы перезагрузите страницу, данные все еще будут там.

Раньше я сохранял состояние Vuex в localStorage в своих приложениях Vue.js, и это работало нормально. Однако были некоторые минусы, самый большой из них заключался в том, что только некоторые части состояния Vuex хранились в localStorage, если я не сохранил все вручную.

Vuex-persist

Vuex-persist - это NPM-пакет, который используется для хранения состояния Vuex в постоянном хранилище. Это очень похоже на localStorage или даже Cookies (см. Разницу между localStorage, Cookies и sessionStorage).

Он автоматически сохраняет память при мутации и делает ее устойчивой.

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

Если вы сохраняли состояние Vuex вручную или частично, попробуйте Vuex-persist.

Вы можете скачать это здесь".

Если вы найдете этот пост полезным, дайте мне знать в комментариях ниже.
Ура,
Ренат Галямов

Хотите поделиться этим с друзьями?
👉 renatello.com/vue-js-array-length-watcher

PS: Обязательно ознакомьтесь с другими руководствами по Vue.js, например 5 лучших CSS-фреймворков для вашего проекта Vue.js (2019) или как вернуться на предыдущую страницу в Vue.js.

Первоначально опубликовано на https://renatello.com ( LocalStorage против Vuex-persist в Vue.js ) 12 июля 2019 г.