javascript - 如何异步获取语言环境(nuxt.js + i18n + axios)

我想异步获取位置。不幸的是，我的代码导致“超出最大调用堆栈大小”错误。如何正确执行？

到目前为止，我已经尝试通过在messages对象中调用axios命令来实现此目的。

~/plugins/i18n.js

import Vue from "vue";
import VueI18n from "vue-i18n";
import axios from 'axios';

Vue.use(VueI18n);

export default async ({ app, store }) => {
    app.i18n = new VueI18n({
    locale: 'fr',
    fallbackLocale: 'en',
    messages: {
        en: await axios.get('https://some-api/en/locale'),
        fr: await axios.get('https://some-api/fr/locale')
    }
});

}

我想在呈现页面之前异步获取我的语言环境。

最佳答案

您可以在创建Vue实例时在beforeCreate挂钩中执行以下操作：

const i18n = new VueI18n();
new Vue({
  el: rootElement,
  i18n,
  beforeCreate() {
    const vm = this;
    axios.get(url)
      .then((response) => {
        vm.$i18n.setLocaleMessage('en', response.data);
    });
  }
});