[译] 用 Vue.js 3 Composition API 创建 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;
}

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

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

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