[译] 用 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 ,就是因其易于通过清晰的模式,开发可预测与可维护的代码。




相关文章
|
26天前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
2天前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
11天前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
39 16
|
7天前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
3天前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
12 1
|
11天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
19天前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
36 12
|
21天前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
24 6
|
25天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
31 5
|
25天前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
下一篇
DataWorks