1

我还是 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？）之后，翻译又开始工作了..但翻译状态仍然不是持久的（意味着如果我刷新页面或者打开一个新的网址，然后它会变回英文翻译...

任何想法为什么会这样？

4

1 回答 1

4

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.

于 2017-10-21T00:57:47.030 回答