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

Question

我想异步获取位置。不幸的是，我的代码导致“超出最大调用堆栈大小”错误。我怎样才能正确地做到这一点？

到目前为止，我已尝试通过在消息对象内调用 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')
    }
});

}

我想在页面呈现之前异步获取我的区域设置。

Answer 1

您可以在创建 Vue 实例时在 beforeCreate Hook 中执行此操作:

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