Nuxt.js + vue-i18n + axios: невозможно получить доступ к данным на странице

Question

У меня возникают трудности с отображением данных в NuxtJS в потоке i18n.

Вот два файла, я наверняка что-то упустил в конфигурации:

Плагины> i18n.js:

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

Vue.use(VueI18n, axios)

export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': axios({
        method: 'get',
        url: 'https://jsonplaceholder.typicode.com/posts'
      }).then((res) => { return { posts: res.data } }),
      'fr': 'hello'
    }
  })
}

Страницы> blog.vue:

<template>
  <div class="Content">
    <div class="container">
        <ul>
            <li v-for="post in posts">
                {{ $t('post.title') }}
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    posts: []
  })
}
</script>

Не могли бы вы иметь представление о проблеме?

Answer 1

Согласно новой документации vue-i18n, вы должны использовать i18n.setLocaleMessage добиться динамической локали. вот как я делаю в Nuxt

~ / плагинов / vuex-persistedstate.js

import createPersistedState from 'vuex-persistedstate';
import acceptLanguage from 'accept-language';
import * as acceptLanguageList from '~/assets/static/lang.json';
acceptLanguage.languages(acceptLanguageList);

export default async ({ app, store }) => {
  createPersistedState({
    key: 'setting',
    paths: ['local'],
  })(store);

  const lang = store.state.local.ui_lang;
  const avail = acceptLanguage.get(navigator.language);

  // wait file downloading or page will load 'no locale'
  await app.i18n.loadLocaleMessage(lang || avail, '/locales/');
};

~ / плагины / i18n.js

import axios from 'axios';

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

Vue.use(VueI18n);

export default ({ app }) => {
  /** 
   * silentTranslationWarn will disable warning when
   * loading locale without a preloaded locale
    */
  app.i18n = new VueI18n({ silentTranslationWarn: true });
  app.i18n.loadLocaleMessage = async (locale, path) => {
    let data = null;
    try {
      const file = await axios.get(`${path + locale}.json`);
      data = await file.data;
      app.i18n.setLocaleMessage(locale, data);
      app.i18n.locale = locale;
    } catch (e) {
      // do nothing
    }
    return data;
  };
};

~ / nuxt.config.js

/* ... */
plugins: [
    '~/plugins/i18n.js',
    { src: '~/plugins/vuex-persistedstate.js', ssr: false },
],
/* ... */

тогда твоя страница (мопс)

your-component {{$t(content)}}

вы можете динамически менять свой язык

this.$i18n.locale = locale;
await this.$i18n.loadLocaleMessage(locale, '/locales/');

У меня была боль и нет времени редактировать больше