vue.js - Vue-i18n - http リクエストからの動的ローカリゼーションに関する問題

Question

アプリケーションに同梱するのではなく、言語を動的で管理しやすいものにしたいので、HTTP 呼び出しからローカリゼーションをロードしようとしています。

SSR サンプルと独自の実装を使用して回避策を実行しました。しかし、最初のレンダリングでは、言語はロードされません。ルートを変更すると、クライアント側のものが更新されます。

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en.json'
import ar from './ar.json'
import axios from 'axios'

Vue.use(VueI18n)

const fallbackLocale = 'en'
let defaultLocale = 'ar'

export const i18n = new VueI18n({
  locale: defaultLocale, // set locale
  fallbackLocale: fallbackLocale,
  messages: {
    'en': en
  }
})

export function createI18n () {
  return i18n
}

ルーター - router.beforeEach

router.beforeEach((to, from, next) => {
    if (router.app.$store) {
        router.app.$store
          .dispatch('getI18nData')
          .then(function(){
            router.app.$i18n.setLocaleMessage('ar',router.app.$store.getters.getLocale)
            return next()
          })
          .catch(() => console.log('getI18nData-error'))
      } else {
        next()
      }
  })

Store アクション - ロケールをフェッチする

getI18nData ({ commit }) {
   try {
     axios.get('http://localhost:8080/lang?lang=ar')
    .then(function (response) {
      let locale = response.data
      commit('setLocale', { locale })
    })
    .catch(function (error) {
      console.log('Error:getI18nData')
    })
   } catch (error) {
     console.error(error);
   }
 }

調査結果: i18n はrouter.beforeEachの後に初期化する必要がある場所の前に初期化していrouter.beforeEachます。

Github の問題リンク