Сохраниение состояния

Общие принципы

  • Для управления состоянием страницы в проекте используется библиотека Pinia.

  • Для сохранения состояния в persistent-режиме используется библиотека Persist Pinia

Подключение

package.json
"pinia": "^2.0.23",
"@pinia/testing": "^0.0.14",
main.ts
import { createPinia } from "pinia";
const pinia = createPinia();
const app = createApp(App)
  .use(pinia)

Пример использования для сохранеиня выбранного языка

App.vue. Пример подключения хранишища (файл stores/internationalizations.ts для сохранения выбранного языка)
import { useInternationalizationStore } from "@/stores/internationalization";
const internationalization = useInternationalizationStore();
App.vue. Сохранение
watch(locale, (value) => {
  setTitle("");
  internationalization.setLocale(value);
});
main.ts. Считывание
import { useInternationalizationStore } from "@/stores/internationalization";
const internationalization = useInternationalizationStore();
i18n.global.locale.value = internationalization.locale;

Подключение persistent режима сохранения состояния

package.json
"pinia-plugin-persistedstate": "^2.3.0",
Включить режим persist в store
persist: true,
Подключение сохранения в main.ts
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
pinia.use(piniaPluginPersistedstate);