Vue.js和Vue-i18n，JSON從$ ajax到對象文字

Question

我將Vue.js和插件vue-i18n一起用於國際化。 它接受lang和locales參數，后面是屬性名稱和關聯值（ object literals ）的列表。 這樣，直接在locales選項中或存儲在本地變量中的引用object literals列表可以按預期方式工作，例如下面的示例：

var locales = {
    "en": {
        "menu": {
            "about": "about",
            "news": "news",
            "contact": "contact"
        }
    },
    "fr": {
        "menu": {
            "about": "à propos",
            "news": "actualités",
            "contact": "contacter"
        }
    }
}

Vue.use(VueI18n, {
    lang: 'fr',
    locales: locales
});

請注意，盡管采用了格式設置（雙引號始終貫穿列表），但上面的內容不是json array ，而是object literals列表，其中包含屬性名稱的string literals 。

現在，我一直在努力依靠Json文件，而不是直接在腳本中聲明object literals列表。 例如，我嘗試了一個ajax請求，例如：

Vue.use(VueI18n, {
    lang: 'fr',
    locales: $.ajax({
                 url: "../resources/i18n/locales.json",
                 dataType: "json",
                 type: "GET",
                 success: function(data) {
                     console.log(data);
                 }
             })
});

url字符串指向具有與上述完全相同的數據和格式的locales.json文件，唯一的區別是它寫在方括號內。

我還沒有與這種做法很成功，雖然，這在我的腦海里，因為不會使一個很有意義data似乎被正確解析。 這是我在控制台中得到的：

Array[1]
  0: Object
    en: Object
      menu: Object
        about: "about"
        contact: "contact"
        news: "news"
    fr: Object
      menu: Object
        about: "à propos"
        contact: "contacter"
        news: "actualités"

我想知道我做錯了什么嗎？

Answer 1

$.ajax返回xmlHttpRequest對象，而不是值。 您必須等到ajax的回調函數才可以使用該值：

$.ajax({
    url: "../resources/i18n/locales.json",
    dataType: "json",
    type: "GET",
    success: function(data) {
        Vue.use(VueI18n, {
            lang: 'fr',
            locales: data
        });
        console.log(data);
    }
})

這也假定Vue在全球范圍內都可用

Answer 2

您可以嘗試這種方法：

// install the plugin
Vue.use(VueI18n)

// load the `fr` locale dynamically
Vue.locale('fr',
  function () {
    // should return a promise
    return new Promise(function (resolve, reject) {
      $.ajax('../resources/i18n/locales.json').done(resolve).fail(reject)
    })
  },
  function () {
    vue.config.lang = lang
  }
)