从Pinia Store获取i18n locale语言时遇getActivePinia错误

错误原因 #

你在初始化i18n的顶层代码中直接调用了useaStore()，此时Vue应用还未创建，Pinia也没有被挂载到应用实例上，自然不存在活跃的Pinia实例，因此触发了getActivePinia()报错。

修复方案 #

需要调整代码顺序，先完成Pinia和i18n的挂载，再从Pinia获取语言值并同步到i18n，同时监听语言变化实现实时更新。

1. 修改i18n/index.js #

先创建i18n实例，暂时使用默认语言：

import { createI18n } from "vue-i18n";
import en from './locales/en'
import ar from './locales/ar'

const i18n = createI18n({
  locale: 'ar', // 先设默认值，后续从Pinia同步
  fallbackLocale: 'ar',
  legacy: false,
  globalInjection: true,
  messages: { en, ar }
})

export default i18n

2. 在应用入口文件（如main.js）中同步语言 #

等Pinia挂载完成后，再获取Store中的语言值，并监听变化：

import { createApp, watch } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import { storeToRefs } from "pinia";
import { useaStore } from './stores/countdowns'
import i18n from './i18n'

const app = createApp(App)
const pinia = createPinia()

// 先挂载Pinia和i18n
app.use(pinia)
app.use(i18n)

// 此时Pinia已激活，可正常调用useaStore
const store = useaStore()
const { language } = storeToRefs(store)

// 同步初始语言到i18n
i18n.global.locale.value = language.value

// 监听语言变化，实时更新i18n的locale
watch(language, (newLang) => {
  i18n.global.locale.value = newLang
})

app.mount('#app')

关键说明 #

Pinia的useStore系列方法只能在Pinia已被应用挂载后调用，包括：

• Vue组件的setup函数内
• 应用挂载完成后的代码逻辑中
• Pinia的action、getter内部

内容的提问来源于stack exchange，提问作者mofarih-dev