[譯] 用 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;
}
複製代碼

如你所見，函數 provide 和 inject 被用來建立插件實例，並用一種依賴注入機制將其持有。

注意咱們在 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"; 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 ，就是因其易於經過清晰的模式，開發可預測與可維護的代碼。

--End--

查看更多前端好文
請搜索 fewelife 關注公衆號

轉載請註明出處