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 /商店/ 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，或者因为我在调度中做错了，因为在我的一个视图中我写了{{$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这样的网址中。然后，您可以从路由器参数获取区域设置。

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

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

1 个答案: