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

Vue.js and vue-i18n, json from $ajax to object literals

本文关键字：Object 文字 json ajax js vue-i18n Vue      更新时间：2023-09-26

我正在使用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"
我

想知道我做错了什么？

$.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 在全球范围内可用

您可以尝试此方法：

// 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
  }
)
相关文章：