如何异步获取语言环境（nuxt.js + i18n + axios）答案

【问题标题】：How to fetch locales asynchronously (nuxt.js + i18n + axios)如何异步获取语言环境（nuxt.js + i18n + axios）
【发布时间】：2019-09-15 19:38:42
【问题描述】：

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

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

}

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

【问题讨论】：

标签： javascript vue.js vuejs2 axios nuxt.js

【解决方案1】：

您可以在创建 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);
    });
  }
});

【讨论】：

【解决方案2】：

使用中间件： https://nuxtjs.org/api/pages-middleware#the-middleware-property

或者使用 axios 从 store 中的模块中获取数据并在nuxtServerInit 中调用：

export default actions {
async nuxtServerInit({dispatch}){
  await dispatch('apicallmodule/apicallAction')
}

【讨论】：