在 vue.js 中，如何在 functions.js 中使用 i18n？

Question

我為用戶創建了一個包含多個功能的文件，在這些功能之一中，我如何使用 i18n？ 我認為 this.$t 對我有用，但它不起作用。

函數.js

import Vue from 'vue'
import moment from 'moment'

export default {

delete() {

        return new Promise((resolve) => {
            Vue.swal({
                title: this.$t('delete'),
                type: 'warning',
                showCancelButton: true,
                //confirmButtonColor: '#3085d6',
                //cancelButtonColor: '#d33',
                confirmButtonText: 'Eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.value) resolve();
            });
        });
        
    }

{{ $t('back') }}在<template> ， this.$t('back')在 vue 組件中也有效。

Answer 1

您需要創建一個名為src/i18n.js的文件，內容如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locales from "./locales.json";

Vue.use(VueI18n);

const i18n = new VueI18n(
  {
    fallbackLocale: 'en',
    locale: 'en',
    messages: locales,
    silentTranslationWarn: true
  });

export default i18n;

然后在你的main.js和functions.js導入它

import i18n from './i18n'
import Vue from 'vue'
import App from './App.vue'

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

import Vue from 'vue'
import moment from 'moment'
import i18n from './i18n'

export default {

delete() {

        return new Promise((resolve) => {
            Vue.swal({
                title: i18n.t('delete'),
                type: 'warning',
                showCancelButton: true,
                //confirmButtonColor: '#3085d6',
                //cancelButtonColor: '#d33',
                confirmButtonText: 'Eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.value) resolve();
            });
        });
        
    }