如何在Nuxt3 Pinia Store中使用i18n消息？解决调用报错问题

你遇到的SyntaxError: Must be called at the top of a setup function错误，根源在于两个问题：

1. 直接在模块顶层调用useI18n()，违反了Vue组合式API的调用规则——这类组合式函数必须在setup上下文（包括Pinia的setup风格定义、getters/actions内部）中调用。
2. 在Pinia选项式的state里直接使用国际化函数$t，此时i18n实例尚未初始化完成，且选项式的state无法直接访问组合式API的函数。

下面提供两种可行的解决方式：

方式一：使用Pinia的setup风格定义Store #

这种方式更贴合Nuxt3的组合式API生态，能直接安全地调用useI18n：

import { defineStore } from 'pinia';
import { useI18n } from 'vue-i18n';

export const useAppStore = defineStore('appStore', () => {
  // 在setup函数内部调用useI18n
  const { t } = useI18n();

  // 用computed实现响应式：语言切换时label自动更新
  const label = computed(() => t('welcome'));

  // 如果不需要响应式（仅初始化时赋值），可以用ref：
  // const label = ref(t('welcome'));

  return { label };
});

方式二：在选项式Store中通过getter获取国际化文本 #

如果坚持使用选项式写法，不要在state里赋值，改用getters来获取国际化文本：

import { defineStore } from 'pinia';

export const useAppStore = defineStore('appStore', {
  state: () => ({
    // 这里无需存放国际化相关内容
  }),
  getters: {
    label() {
      // 在getter内部调用useI18n，符合上下文要求
      const { t } = useI18n();
      return t('welcome');
    }
  }
});

这种写法下，语言切换时getter会自动重新计算，保证文本同步更新。

额外说明：在actions中使用i18n #

如果需要在actions里调用国际化函数，直接在action内部调用useI18n即可：

actions: {
  showWelcomeMessage() {
    const { t } = useI18n();
    const welcomeText = t('welcome');
    // 后续逻辑，比如弹窗提示等
  }
}

内容的提问来源于stack exchange，提问作者Stefan