vue-i18nはvuexを統合した後にロケールを更新しない

Question

私はまだVueを初めて使っていますが、私はほとんどそれを抱いているように感じます。異なる言語に翻訳できるアプリを作りました。コンテンツはLANG.jsonファイルからロードされました。問題は、新しいビューに変更するたびに元の変換に戻ります。

私はVuexをアプリケーションに統合しようとしましたが、

のsrc /国際化/ index.js

：「Tは、私は、これは、関連するすべてのコードであると考えてい

...それが動作するように取得するように見えます

import Vue from 'vue' 
import VueI18n from 'vue-i18n' 
import store from './../store' 

Vue.use(VueI18n) 

export default new VueI18n({ 
    locale: store.state.Language, 
    messages: { 
    'en': require('./en.json'), 
    'cn': require('./cn.json') 
    } 
}) 

のsrc /店舗/ index.js

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex) 

const actions = { 
    changeLanguage: ({ commit }, data) => commit('changeLanguage', data) 
} 

const mutations = { 
    changeLanguage (state, data) { 
    this.state.Language = data 
    } 
} 

const getters = { 
    getLanguage: state => state.Language 
} 

const state = { 
    Language: 'en' 
} 

export default new Vuex.Store({ 
    state, 
    getters, 
    actions, 
    mutations 
}) 

のsrc/main.js

[...] 
import store from './store' 
import i18n from './i18n' 
[...] 
new Vue({ 
    el: '#app', 
    router, 
    store, 
    i18n, 
    render: h => h(App) 
}) 

のsrc /コンポーネント/ randomfile.js

<template> 
[...] 
<button v-on:click="en">English</button> 
<button v-on:click="cn">Chinese</button> 
</template> 
<script> 
export default { 
    name: 'navFooter', 
    data() { 
    return { 
    } 
    }, 
    methods: { 
    en: function() { 
     console.log('change lang') 
     this.$store.dispatch('changeLanguage', 'en') 
     // this.$i18n.locale = 'en' 
    }, 
    cn: function() { 
     this.$store.dispatch('changeLanguage', 'cn') 
     // this.$i18n.locale = 'cn' 
    } 
    } 
} 
</script> 

私は推測しています問題はこの行に関連しています：locale: store.state.Language、または私がsomethiをやっているので私の意見の1つで、ページロード時にenにレンダリングする{{$store.state.Language}}を書きますが、ディスパッチのためのメソッドを呼び出すボタンをクリックすると表示されなくなるため、ディスパッチでは間違っています。

私は{{ $t('views.home.title') }}で翻訳を呼びますが、vuex（ストア）を統合した後に呼び出す必要があり、ボタンのクリック後には翻訳が表示されないようにする必要がありますそれはchangeLanguageをディスパッチします。

任意の助けも

---

編集いただければ幸いです：実際に、私が翻訳された方法が違いを生むことがなかったようだ...その後、翻訳が開始（多分これはthis.$store.state.Languageすべきですか？）{{ $t('views.home.title', $store.state.Language) }}にそれを変更した後、再び作業..しかし、変換状態は、まだ永続的ではありません（私はページを更新するか、新しいURLを開くと、それが戻って英語の翻訳に変更されます意味...

任意のアイデアつまり、なぜ？

Answer 1

Vuexストアは保持されません。ページをリロードするとリセットされます。

ロケールを永続化するには、ローカルストレージ（IndexedDBなど）またはバックエンドサーバーに格納する必要があります。

別の方法（永続的ではない）は、URLに/:locale/pageのように埋め込むことです。次に、ルータのパラメータからロケールを取得できます。

$t('views.home.title')がthis.$i18n.localeからロケールを使用して、あなたはthis.$i18n.localeを更新しない、そして$t('views.home.title')は最初のロケール、'en'との変換を示しています。

$t('views.home.title', $store.state.Language)は、this.$i18n.localeを使用せず、自分でロケールを指定するために機能します。