vue-i18n이 vuex를 통합한 후 로케일을 업데이트하지 않음

vue-i18n이 vuex를 통합한 후 로케일을 업데이트하지 않음

아직 Vue는 처음이지만, 거의 요령을 터득하고 있는 것 같아요.콘텐츠를 LANG.json 파일에서 로드한 다른 언어로 번역할 수 있는 앱을 만들 수 있었습니다.문제는 내가 새로운 시각으로 바꿀 때마다 그것이 원래의 번역으로 돌아간다는 것이다.

그래서 Vuex를 어플리케이션에 통합하려고 했는데 잘 작동하지 않는 것 같아요.

이게 관련된 모든 코드라고 생각합니다.

src/i18n/index.module

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/store/index.disples

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

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

src/components/syslogfile.displaces

<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또는 디스패치를 잘못하고 있기 때문에, 제 뷰 중 하나에서{{$store.state.Language}}에 렌더링합니다.en디스패치 방법을 호출하는 버튼을 클릭하면 사라집니다.

번역 담당자는{{ $t('views.home.title') }}그러나 vuex(스토어)를 통합한 후에도 그렇게 불러야 하며 번역은 정상적으로 표시되지만 changeLanguage를 디스패치하는 버튼을 클릭해도 업데이트되지 않습니다.

어떤 도움이라도 주시면 감사하겠습니다.

---

편집: 사실 제가 번역한 방식이 다른 것 같아요.로 바꾸고 나서{{ $t('views.home.title', $store.state.Language) }}(아마도 이것은this.$store.state.Language번역이 재개되었습니다.그러나 번역 상태는 아직 지속적이지 않습니다(즉, 페이지를 갱신하거나 새로운 URL을 열면 영어 번역으로 돌아갑니다).

왜 그랬는지 짐작이 가?

Vuex 저장소가 지속되지 않습니다.페이지를 새로고침하면 페이지가 리셋됩니다.

로케일을 유지하려면 로컬 스토리지(인덱스됨 등)에 저장해야 합니다.DB) 또는 백엔드 서버.

다른 방법(지속적이지 않음)은 다음과 같은 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.

언급URL : https://stackoverflow.com/questions/46130831/vue-i18n-doesnt-update-locale-after-integrating-vuex