[译] 用 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) {

returnthis.messages[this.locale.value][key];

}

});

const i18nSymbol = Symbol();

exportfunctionprovideI18n(i18nConfig) {

const i18n = createI18n(i18nConfig);

provide(i18nSymbol, i18n);

}

exportfunctionuseI18n() {

const i18n = inject(i18nSymbol);

if (!i18n) thrownewError("No i18n provided!!!");

return i18n;

}

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

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

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

  • 马什么梅?I什么N?浅谈 web 前端开发中的国际化
  • [译] 软件本地化中的 10 个常见错误
  • [译] 对比 React Hooks 和 Vue Composition API
  • [译] Vue 3 Composition API 之单元测试

⏺ provide

而后,必须在应用中通过调用 provideI18n 函数,用正确的配置初始化该插件。

这一般是在 App.vue 根组件中进行的:

<script>

import { provideI18n } from"./i18nPlugin";

import HelloWorld from"./HelloWorld";

exportdefault {

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";

exportdefault {

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";

exportdefault {

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



--End--

查看更多前端好文
请搜索 fewelife 关注公众号

转载请注明出处

以上是 [译] 用 Vue.js 3 Composition API 创建 i18n 插件 的全部内容, 来源链接: utcz.com/a/27696.html

回到顶部