vue-i18n은 vuex 통합 후 로캘을 업데이트하지 않습니다.

Question

저는 아직 Vue를 처음 사용하고 있지만, 거의 마음이 편찮습니다. 다른 언어로 번역 할 수있는 앱을 만들었습니다. 콘텐츠가 LANG.json 파일에서로드되었습니다. 문제는 새로운 뷰로 변경 될 때마다 원본 번역으로 되돌아갑니다.

그래서 Vuex를 내 응용 프로그램에 통합하려고 시도했지만 'T는 일하러 것 같습니다 ..

을 내가 믿는이 모든 관련 코드 :

SRC/국제화 /하는 index.js

,451,515,

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/구성 요소/내가 추측하고있어

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

을 randomfile.js 문제는이 줄과 관련이 있습니다 : locale: store.state.Language, 또는 내가 somethi을하고 있기 때문에 내보기 중 하나에서 페이지로드시 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와 같은 로컬 저장소 또는 백엔드 서버에 저장해야합니다.

또 다른 방법 (지속성이 아님)은 /:locale/page과 같은 URL에 퍼가는 것입니다. 그런 다음 라우터 매개 변수에서 로케일을 가져올 수 있습니다.

$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을 사용하지 않고 사용자가 직접 로캘을 지정하기 때문에 작동합니다.