Персистентность состояния

Quasar предоставляет мощные возможности для управления состоянием приложений на базе Vue.js через интеграцию с Vuex и Composition API. Персистентность состояния позволяет сохранять данные между перезагрузками страницы, что критично для сложных приложений с большим количеством пользовательских настроек и данных сессий.

Использование Vuex для глобального состояния

В Quasar рекомендуется организовывать глобальное состояние через Vuex-модули. Каждый модуль отвечает за отдельную часть приложения: пользовательские данные, настройки интерфейса, корзину покупок и т.д.

Пример структуры модуля Vuex:

// store/user.js
export default function () {
  return {
    namespaced: true,
    state: {
      profile: null,
      token: null
    },
    mutations: {
      setProfile(state, profile) {
        state.profile = profile;
      },
      setToken(state, token) {
        state.token = token;
      }
    },
    actions: {
      login({ commit }, { profile, token }) {
        commit('setProfile', profile);
        commit('setToken', token);
      },
      logout({ commit }) {
        commit('setProfile', null);
        commit('setToken', null);
      }
    },
    getters: {
      isAuthenticated: state => !!state.token
    }
  }
}

Ключевой момент — использование namespaced modules, позволяющее избежать коллизий имен мутаций и действий в больших приложениях.

Персистентность через vuex-persistedstate

Для сохранения состояния между перезагрузками используется библиотека vuex-persistedstate. Она сохраняет состояние Vuex в localStorage или sessionStorage.

Пример интеграции:

// store/index.js
import { store } from 'quasar/wrappers'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import user from './user'

export default store(function () {
  const Store = new Vuex.Store({
    modules: {
      user
    },
    plugins: [
      createPersistedState({
        key: 'my-app',
        paths: ['user.profile', 'user.token'],
        storage: window.localStorage
      })
    ],
    strict: process.env.DEBUGGING
  })

  return Store
})

Особенности:

  • paths позволяет указать конкретные ветви состояния для персистентности, исключая ненужные данные.
  • Можно использовать sessionStorage, если данные должны жить только в рамках одной сессии.

Composition API и персистентность

Quasar поддерживает Composition API, что позволяет более гибко управлять состоянием без полного Vuex. Для этого можно использовать ref и reactive с локальным хранилищем браузера:

import { ref, watch } from 'vue'

const theme = ref(localStorage.getItem('theme') || 'light')

watch(theme, (newVal) => {
  localStorage.setItem('theme', newVal)
})

Преимущества такого подхода:

  • Меньше кода по сравнению с Vuex для небольших состояний.
  • Полный контроль над синхронизацией с localStorage.
  • Легко комбинируется с Quasar-компонентами, такими как QToggle для смены темы.

Интеграция с Quasar Storage API

Quasar предоставляет встроенный API для работы с персистентным хранилищем: LocalStorage и SessionStorage.

Пример:

import { LocalStorage, SessionStorage } from 'quasar'

// Сохранение данных
LocalStorage.set('settings', { darkMode: true, language: 'ru' })

// Получение данных
const settings = LocalStorage.getItem('settings')

// Очистка
LocalStorage.remove('settings')

Плюсы использования Quasar API:

  • Абстракция над браузерным localStorage, поддержка JSON-сериализации.
  • Удобные методы для установки, получения, удаления и очистки всех данных.
  • Возможность работы с SessionStorage для временного хранения.

Персистентность и реактивность

Для корректной работы с персистентным состоянием важно сохранять реактивность данных. Использование reactive или Vuex-модулей вместе с LocalStorage обеспечивает автоматическое обновление компонентов при изменении состояния:

import { reactive, watch } from 'vue'
import { LocalStorage } from 'quasar'

const settings = reactive(LocalStorage.getItem('settings') || {
  darkMode: false,
  language: 'en'
})

watch(settings, (newSettings) => {
  LocalStorage.set('settings', newSettings)
}, { deep: true })

Глубокий watch (deep: true) гарантирует, что любые изменения вложенных объектов будут синхронизированы с хранилищем.

Управление большим объемом состояния

Для приложений с большим количеством данных рекомендуется:

  • Разбивать состояние на модули Vuex.
  • Персистировать только критически важные ветви состояния.
  • Использовать Quasar Storage API или vuex-persistedstate для надежной синхронизации с localStorage.
  • Применять Composition API для локальных реактивных данных, которые не требуют глобальной синхронизации.

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

События и синхронизация между вкладками

Quasar позволяет отслеживать изменения localStorage в других вкладках браузера с помощью стандартного события storage:

window.addEventListener('storage', (event) => {
  if (event.key === 'settings') {
    console.log('Настройки обновлены в другой вкладке', event.newValue)
  }
})

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

Эта система управления состоянием в Quasar сочетает гибкость Composition API, масштабируемость Vuex и удобство персистентного хранилища, позволяя создавать стабильные и отзывчивые веб-приложения с сохранением данных между сессиями.

Оглавление