Vue - 如何在 router.ts 中使用 i18n 来使用商店

Question

在我的 router.ts 中，我需要从我的商店之一获取一个值（我们称之为 storeA）。为此，我确实喜欢这个答案https://stackoverflow.com/a/77053565/19390218建议。所以我的路由器看起来像这样：

router.beforeEach((to, from, next) => {
    if(useStoreA().myString == "something") {
       next()
    }
})

但是我的商店在状态声明中使用 i18n（甚至不是 myString，而是其他东西）。

import { useI18n } from "vue-i18n";

export const useStoreA: StoreDefinition<"storeA"> = defineStore(
  "storeA",
  () => {
    const t = useI18n().t;
    const myString="something";
    const myOtherString = t("hey");
})

因此，出现了这个错误：

[Vue Router warn]: Unexpected error when starting the router: SyntaxError: Must be called at the top of a 'setup' function

因为我现在无法访问i18n，这很奇怪，因为在我的main.ts中，i18n（和pinia）在路由器之前初始化:

app.use(i18n);
app.use(pinia);
app.use(router);

错误与 i18n 相关，因为堆栈跟踪指向行

const t = useI18n().t;

Answer 1

错误解释了问题，除非另有说明，否则预计将在组件中直接调用可组合项

setup

。这是可组合项的常规限制，由组合 API 的实现导致。

provide

/

inject

常用于

useI18n

，此类依赖于组件层次结构，只能在组件

setup

中建立。

Pinia 商店是一个值得注意的例外，因为它不依赖于

provide

/

inject

。因此，当在路由器钩子等随机位置使用时，应该使用 DI 来使用这种可组合项。

例如在根组件中：

store.setI18n(useI18n());

其中

setI18n

设置商店中的

i18n

值。