Как в Vue 3 корректно работать с pinia вне компонента?

Question

[Виталий]

Я в Vue новичок и столкнулся с проблемой при использовании i18n с Pinia.
Ошибка :

"getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

Я понимаю, что получается так, что я пытаюсь использовать хранилище до его инициализации, но не пойму как исправить, кроме как логику i18n засунуть в main.js, чего не хотелось бы делать, а по нормальному, по модулям

Вот мой файл настроийки i18n:

import  { createI18n } from "vue-i18n";
import en from "./en.json"
import ru from "./ru.json"
import {useSettingsStore} from "@/store/SettingsDataStore";

const settingsStore = useSettingsStore();
export default createI18n({
  locale: settingsStore.locale,
  fallbackLocale: 'ru',
  messages: {
    en, ru
  },
  legacy: false,
  globalInjection: true

})

Как видно, здесь locale хочу использовать из значения Хранилища

Хранилище:

import { defineStore} from "pinia"

export const useSettingsStore = defineStore('SettingsStore', {
  state: () => {
    return {
      locale: 'ua',
    }
  },
  actions: {
    changeLocale(localeCode) {
      this.locale = localeCode;
    }
  }
})

И main.js:

import { registerPlugins } from '@/plugins'
import { createPinia } from 'pinia'
import router from "@/router";

import App from './App.vue'

const pinia = createPinia()

import locales from "@/locale"

import { createApp } from 'vue'

const app = createApp(App)

registerPlugins(app)
app.use(pinia)
app.use(router)
app.use(locales)


app.mount('#app')

Подскажите как правильно это реализовать?

Comments

[Антон Антон]

Очевидно, что в settingsStore локаль берется не из воздуха, а из api или local storage. Нужно либо устанавливать локаль при создании i18n из того же источника, либо устанавливать её потом, благо это возможно.

Всё из-за того, что код в @/locale выполняется до app.use(pinia).
Теоретически, можно переставить import locales from "@/locale" после, но это как-то не красиво

[Виталий]

Антон Антон, думал дальше описать логику с localSorage в settingsStore.
Понимаю, что можно напрямую брать данный в файле настройки i18n ( @/locale) из LocalStorage, но думал что лучше логику работы с LocalStorage реализовать непосредственно в settingsStore.

Всё из-за того, что код в @/locale выболняется до app.use(pinia)

- но как можно ето переиграть

[Валерий Чмых]

Можете попробовать вынести const pinia = createPinia() в отдельный файл например в pinia.js как то так
export const pinia = createPinia()
В main.js и i18n соответственно

import {pinia} from "@/.../pinia.js";
app.use(pinia)

import  { createI18n } from "vue-i18n";
import en from "./en.json"
import ru from "./ru.json"
import {useSettingsStore} from "@/store/SettingsDataStore";
import {pinia} from "@/.../pinia.js";

const settingsStore = useSettingsStore(pinia);
export default createI18n({
  locale: settingsStore.locale,
  fallbackLocale: 'ru',
  messages: {
    en, ru
  },
  legacy: false,
  globalInjection: true

})

Answer 1

[Антон Антон]

Нужно в @/locale.js запихнуть все в функцию, которая вернет результат createI18n, и экспортировать уже её. Вызвать эту функцию после app.use(pinia)