如何在 Nuxt3 pinia 商店中使用 i18n 消息

Question

当尝试在 Nuxt3 Pinia 商店中使用 i18n 消息时，我收到错误消息： “语法错误：必须在

setup

函数的顶部调用”

在模板中使用消息时，我可以这样做：

<template>
 <p>{{ $t('welcome') }}</p>
</template>

但是在pinia商店怎么做呢？

这是我在商店尝试的导致错误的方法：

 import { defineStore } from 'pinia';
const { t } = useI18n();

export const useAppStore = defineStore('appStore', {
  state: () => {
    return {
      label: $t('welcome')
    };
  },  
});

Answer 1

Nuxt 中的大多数可组合项都需要应用程序上下文才能使用。在

setup()

选项中包含代码或在组件中使用

<script setup>

标签可确保上下文已知。当应用程序解析模板时，它也会自动可用 - 这就是它在模板中“正常工作”的原因。

有问题的行是

const { t } = useI18n();

，因为这样放置它会在加载脚本时立即执行，而不是在从某个组件调用它之后执行。

我发现以下工作可用于从脚本内引用 I18n 翻译函数，因为

$i18n

对象正在通过模块添加到 Nuxt 应用程序中，并且

useNuxtApp()

向您公开应用程序实例：

export const useAppStore = defineStore('appStore', {
  state: () => {
    return {
      label: useNuxtApp().$i18n.t('welcome')
    };
  },  
});

因为我发现语法有点冗长，所以我通常会在它周围创建一个可组合的包装器以节省一些字符：

export function useT (key: string): string {
  return useNuxtApp().$i18n.t(key)
}

那我只能打电话

useT('welcome')

如果您在组件设置中调用

useAppStore()

，它应该可以正常工作，因为 Pinia 存储不应在第一次

useAppStore()

调用之前初始化。