[译] 用 Vue.js 3 Composition API 创建 i18n 插件

简介: [译] 用 Vue.js 3 Composition API 创建 i18n 插件

原文:vuedose.tips/create-a-i1…

在 Vue.js 3 中用 Composition API 编写插件的方式,和传统上通过一个 install 函数并被 Vue.use(plugin) 使用并不一样;后者通常会在 Vue 原型上做操作或扩展。

但在 Composition API 中的组件,操控是不可能操控的,且 i18n 组件要以一种 inject-provide 模式进行编码。举例来说,可以像这样创建一个 i18n 插件:


// i18nPlugin.js
import { ref, provide, inject } from "@vue/composition-api";
const createI18n = config => ({
  locale: ref(config.locale),
  messages: config.messages,
  $t(key) {
    return this.messages[this.locale.value][key];
  }
});
const i18nSymbol = Symbol();
export function provideI18n(i18nConfig) {
  const i18n = createI18n(i18nConfig);
  provide(i18nSymbol, i18n);
}
export function useI18n() {
  const i18n = inject(i18nSymbol);
  if (!i18n) throw new Error("No i18n provided!!!");
  return i18n;
}

如你所见,函数 provideinject 被用来创建插件实例,并用一种依赖注入机制将其持有。

注意我们在 locale 上使用了 ref,因为要用到其反应式特性。

如果你对 i18n 或 Composition API 尚不了解,可以先阅读:

⏺ provide

而后,必须在应用中通过调用 provideI18n 函数,用正确的配置初始化该插件。 这一般是在 App.vue 根组件中进行的:


<script>
  import { provideI18n } from "./i18nPlugin";
  import HelloWorld from "./HelloWorld";
  export default {
    components: { HelloWorld },
    setup() {
      provideI18n({
        locale: "en",
        messages: {
          en: {
            hello_world: "Hello world"
          },
          es: {
            hello_world: "Hola mundo"
          }
        }
      });
    }
  };
</script>

🔄 inject

最终,在任何需要国际化的组件中,通过在 setup 入口函数中调用 useI18n 函数,来实现 inject。创建如下的 HelloWorld.vue 组件:


<template>
  <div>
    <h2>{{ i18n.$t('hello_world') }}</h2>
  </div>
</template>
<script>
  import { useI18n } from "./i18nPlugin";
  export default {
    setup() {
      const i18n = useI18n();
      return { i18n };
    }
  };
</script>

🌍 i18n

但是...不能更改语言还差着很大点儿意思嘛~ 在之前的代码中添入这个功能:

<template>
  <div>
    <h2>{{ i18n.$t('hello_world') }}</h2>
    <button @click="switchLanguage">Switch language</button>
  </div>
</template>
<script>
  import { useI18n } from "./i18nPlugin";
  export default {
    setup() {
      const i18n = useI18n();
      const switchLanguage = () => {
        const locale = i18n.locale.value === "en" ? "es" : "en";
        i18n.locale.value = locale;
      };
      return {
        i18n,
        switchLanguage
      };
    }
  };
</script>

仅仅通过在一个按钮上调用 switchLanguage 函数,就实现了这个特性。

这就是全部要做的了。我之所以喜爱 Composition API ,就是因其易于通过清晰的模式,开发可预测与可维护的代码。




相关文章
|
17天前
|
存储 JavaScript 前端开发
敲黑板!vue3重点!一文了解Composition API新特性:ref、toRef、toRefs
该文章深入探讨了Vue3中Composition API的关键特性,包括`ref`、`toRef`、`toRefs`的使用方法与场景,以及它们如何帮助开发者更好地管理组件状态和促进逻辑复用。
敲黑板!vue3重点!一文了解Composition API新特性:ref、toRef、toRefs
|
2天前
|
JavaScript API
|
1天前
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API 服务器
【10月更文挑战第3天】使用 Node.js 和 Express 构建 RESTful API 服务器
|
14天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
31 4
|
14天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
28 2
|
17天前
|
JavaScript
particles 粒子背景插件在vue3中的使用
本文介绍了如何在Vue 3项目中使用`particles.vue3`库来创建粒子背景特效。文章提供了粒子背景插件的概述、安装步骤、配置参数说明,并展示了粒子特效的实现效果。同时,提供了在main.js中进行全局配置、在Vue组件中使用粒子背景组件的示例代码,以及完整代码的下载链接。
|
17天前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
|
1天前
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API
【10月更文挑战第3天】 使用 Node.js 和 Express 构建 RESTful API
|
1天前
|
Web App开发 JSON JavaScript
使用 Node.js 构建一个简单的 RESTful API
【10月更文挑战第3天】使用 Node.js 构建一个简单的 RESTful API
|
6天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
17 0