首页 文章

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

提问于
浏览 次
0

我还是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（store）之后我们仍然应该调用它们，并且翻译确实按照它们应该出现，它们只是在点击发送changeLanguage的按钮后才更新 .

任何帮助将非常感激

编辑：实际上，似乎我翻译的方式确实有所作为...将其更改为 {{ $t('views.home.title', $store.state.Language) }} （也许这应该是 this.$store.state.Language ？）然后翻译开始再次工作..但翻译状态仍然不是持久的（意味着如果我刷新页面或打开一个新的URL，然后它将改回英文翻译...

任何想法为什么会这样？

vue.js vuejs2 vuex vue-i18n

1 回答

  • 3

    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 .

    回复于

相关问题