Блог

Я пытаюсь создать приложение без бэкенда и использую Vue с Vuex для установки некоторого состояния в хранилище моего приложения. Есть ли способ сохранить это состояние после настройки и обновления браузера без вызова сервера…или он всегда будет просто возвращаться к значению начального состояния по умолчанию после обновления страницы?

Существует множество веб-интерфейсов API, которые вы можете использовать для сохранения некоторого состояния в браузерах вашего пользователя:

• Локальное хранилище
• Индексированная база данных
• файлы cookie

Есть также пакет, специально предназначенный для этого

Как указано в другом ответе, существует несколько способов сохранения состояния.

Изучение локального хранилища и Vuex есть несколько способов добиться этого.

Все, что хранится в локальном хранилище,-это строки, которые хранятся в виде пар ключ-значение. Чтобы сохранить его в локальном хранилище, вы пишете

 // Store value "value" with key "key"
localStorage.setItem('key', 'value');

// Load data from local storage store as a variable
let val = localStorage.getItem('key');
 

Если вы хотите сохранить объект, вы преобразуете его в строку JSON

 // Convert object to an JSON string and store it with key "key"
localStorage.setItem('key', JSON.stringify(object));

// Retrieve data and convert JSON string to object
let obj = JSON.parse(localStorage.getItem('key'));
 

Вы можете использовать это из Vuex, сохраняя определенные значения или весь магазин.

Например, в функции vuex вы можете проверить локальное хранилище, есть ли значение, и, если нет, получить его из api:

 ...
if (localStorage.getItem('key')) {
    // Use data from local storage
} else {
    // Get it from an api/other source
}
...
 

Если вы хотите хранить весь магазин в локальном хранилище (не говоря о том, что вы должны это делать) и хотите быть уверены, что всегда будете сохранять последнюю версию, вы можете создать подписку в Vuex, которая запускается каждый раз при обновлении магазина.

 // Create a subscription that stores updates on every mutation
store.subscribe((mutation, state) => {
    // Store the store object as a JSON string
    localStorage.setItem('store', JSON.stringify(state));
});
 

Когда ваше приложение Vue создано, вы можете вызвать действие, которое проверяет локальное хранилище и, если хранилище существует, загружает его

 if (localStorage.getItem('store')) {
    // Replace the store state object with the stored object
    this.replaceState(
        Object.assign(state, JSON.parse(localStorage.getItem('store')))
    );
...
}
 

Это краткий обзор того, как хранить в локальном хранилище. Вы должны принять во внимание, как сбросить/аннулировать данные в локальном хранилище. Вы также должны решить, что хранить. Если на нем должна быть какая-то отметка времени и так далее.

Для vuex есть плагины, которые делают кое-что из этого за вас. Взгляните на https://github.com/vuejs/awesome-vue и посмотри, найдешь ли ты что-нибудь.

Как и предполагал Нино, vuex-persist идеально справится с этой работой за вас. Это позволяет выбрать модули vuex, которые вы хотели бы сохранить, чтобы вы могли пропустить, какие модули вы не хотите сохранять, например, некоторые входные значения привязываются к состоянию.

С помощью vuex-persist вам не нужно запоминать ключи или получать/устанавливать значения из локального хранилища.