@Scorpiored88

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

Я в Vue новичок и столкнулся с проблемой при использовании i18n с Pinia.
Ошибка :
"getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?


65a540cc0f77c383336065.png

Я понимаю, что получается так, что я пытаюсь использовать хранилище до его инициализации, но не пойму как исправить, кроме как логику 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')


Подскажите как правильно это реализовать?
  • Вопрос задан
  • 587 просмотров
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Нужно в @/locale.js запихнуть все в функцию, которая вернет результат createI18n, и экспортировать уже её. Вызвать эту функцию после app.use(pinia)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы