Nuxt.js + vue-i18n + axios：ページ内のデータへのアクセスができません

Question

i18nのワイフローでNuxtJSにデータを表示するのは困難です。

<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> 

あなたが持っているでした：blog.vue>

プラグイン>は

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' 
    } 
    }) 
} 

ページ版のi18n.js：

は、ここで私は確かにコンフィギュレーションで何かを逃し、二つのファイルです問題のアイデア？

Answer 1

新しいvue-i18nドキュメントによれば、i18​​n.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/'); 

私が痛みました

と時間がないことで、あなたのロケールが多くを編集することができます