vue-i18n 集成 vuex 后不更新语言环境

Question

我还是 Vue 的新手，但我觉得我几乎掌握了它的窍门。我设法创建了一个可以翻译成不同语言的应用程序，其中的内容是从 LANG.json 文件.. 问题是每当我切换到新视图时，它就会变回原来的翻译..

所以我尝试将 Vuex 集成到我的应用程序中，但我似乎无法让它工作..

我相信这是所有相关代码：

src/i18n/index.js

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.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/components/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，要么是因为我在发送时做错了什么，因为在我的一个观点中我写了 {{$store.state.Language}}，它在页面加载时呈现为 en，但在我单击调用调度方法的按钮后消失。

我用 {{ $t('views.home.title') }} 调用翻译，但我很确定这仍然是集成 vuex（商店）后调用它们的方式，并且翻译确实按应有的方式出现，只是没有单击发送 changeLanguage 的按钮后更新。

如有任何帮助，我们将不胜感激

编辑：实际上，我翻译的方式似乎确实有所不同..将其更改为{{ $t('views.home.title', $store.state.Language) }}（也许应该是this.$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.

vue-i18n 集成 vuex 后不更新语言环境

vue-i18n doesn't update locale after integrating vuex

vue.js

vuex

vuejs2

vue-i18n