javascript - Vue.js 和 vue-i18n，从 $ajax 到对象文字的 json

Question

我使用 Vue.js 和插件 vue-i18n 来实现国际化目的。它接受 lang 和 locales 参数，后者是属性名称和关联值(对象文字)的列表。因此，直接在 locales 选项中或存储在局部变量中引用对象文字列表可以按预期工作，如下例所示:

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 数组，而是一个包含 string literalsfor the name of the properties 的对象文字 列表.

现在，我一直在努力解决的是依赖 Json 文件，而不是直接在脚本中声明对象文字列表。例如，我尝试过 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 在全局范围内可用