i18n Vue3 读取或更改语言环境

Question

我对 Vue3 或客户端开发总体来说还算陌生，我的任务是从 i18n 读取或更改全局语言环境。但根据文档，我应该能够在我的组件中使用 $i18n 变量，但它告诉我它是未定义的。

这是我的 i18n 配置：

    从“vue-i18n”导入{createI18n}；
    从“./locales/en.json”导入 en；
    从“./locales/nl.json”导入 nl；
    
    常量 i18n = createI18n({
      区域设置：“nl”，
      允许成分：真，
      warnHtmlInMessage: "关闭",
      后备区域设置：“nl”，
      消息：{
        恩，
        荷兰，
      },
    });
    导出默认i18n；

我的 main.ts 正在使用这个

    从“vue”导入{createApp}；
    从“axios”导入 axios；
    从“@/App.vue”导入应用程序；
    从“@/router”导入路由器；
    从“@/plugin/appSettings”导入 appSettings, { type iAppSettings };
    从“@/plugin/api”导入 api；
    从“@/i18n”导入 i18n；
    从“@/stores”导入pinia；
    
    const startUp = async () => {
      尝试 {
        让设置=空；
        const 结果 = 等待 axios.get("config/config.json");
        设置=结果.数据；
        console.debug("加载的配置：", 设置);
    
        const app = createApp(应用程序);
        应用程序使用（pinia）；
        应用程序。使用（路由器）；
        app.use(appSettings, 设置);
        app.use(api, 设置?.apiUrl);
        应用程序.use(i18n);
    
        app.mount("#app");
    
        // 通过 `global` 属性更改语言环境，这应该根据文档工作，但事实并非如此。
        i18n.global.locale = "en";

        //也不起作用
        i18n.global.locale.value = "en";
      } 捕获 (e) {
        console.error("启动失败", e);
      }
    };
    启动()
      。然后（
        () => {
          console.debug("应用程序已安装");
        },
        (e) => {
          console.error("启动失败", e);
        }
      ）
      .catch((e) => {
        console.error("启动失败", e);
      });

根据文档，我可以在我的 Composition API 组件中使用 $i18n 变量。

    
    从“@/plugin/appSettings”导入{ useAppSettings }；
    从“vue”导入{ref}；
    从“vue-i18n”导入{useI18n}；
    
    const props = DefineProps({
      年：{ 类型：数字，必需：true }，
      currentYear: { 类型：数字，必需：true },
    });
    
    const appSettings = useAppSettings();
    const { t } = useI18n();
    
    常量年份 = ref(11);
    year.value = props.year.toString();
    
    if (props.currentYear > 2022) {
      year.value += " - " + props.currentYear;
    }
    
    //此对象可能未定义
    这个.$i18n
    
    //$i18n 未定义
    $i18n

也在我的组件模板中尝试过这个，但遗憾的是也不起作用，就像这里提到的那样https://vue-i18n.intlify.dev/guide/essentials/scope.html#global-scope-1

Answer 1

我自己解决了，我需要去掉括号。不确定这些括号的作用，如果有人可以向我解释或者有一个好的资源让我可以阅读这个问题，我将不胜感激。

import { useI18n } from "vue-i18n";
const { t } = useI18n();

import { useI18n } from "vue-i18n";
const t = useI18n();
t.locale.value = "en";

Answer 2

1. i18n.global.locale = "en"

   不工作

这可能是文档中的错误，因为

i18.global.locale

是

ref

（准确地说是WritableCompulatedRef），所以正确的方法实际上是

i18n.global.locale.value = 'en'

（在我的应用程序中有效）

2. $i18n

   未定义

这是因为模板之外的所有组件数据/方法等（选项 API）都必须与

this.

一起使用 - 所以

this.$i18n.locale

应该可以工作

Answer 3

你可以这样做：

const { t } = useI18n();
const i18n = useI18n();
i18n.locale.value = "en";