Vue-i18n 在 data 方法中不能正常工作？

Question

多语言文件夹i18n内容如下：

src lang cn.js us.js index.js

index.js文件内容如下：

import VueI18n from 'vue-i18n'
import Vue from 'vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'cn',
    messages:{
        'cn': require('./lang/cn'),
        'us': require('./lang/us')
    }
})

export default i18n;

mina.js

import Vue from 'vue'
import App from './App'
import router from './router'
import i18n from './i18n' //import mutil-lang

Vue.config.productionTip = false

var VueCookie = require('vue-cookie');
Vue.use(VueCookie);

new Vue({
  el: '#app',
  router,
  template: '<App />',
  i18n, //import mutil-lang
  components: { App }
})

我想说写模板标签和JS代码，如下：

<template>    
    <div class="wrap">
        {{ $t('message.the_world') }}
    </div>
</template>

和

export default {
    name:'dkc-exchange-detail' ,
    data(){
        return {
            showExchangeTypes: false,
            exchangetItems: [
                //this.$t('message.the_world') Want to get the character of the corresponding language
                {id: 1, text: this.$t('message.the_world')},//
                {id: 2, text: this.$t('message.the_world_2')}
            ],                 
        }
    },
}

当我切换多语言方法时：

methods:{        
    choiceLang: function(lang){
        if(lang === this.currentLang)
            return;
        this.currentLang = lang;
        this.showLangSelecor = false;
        this.$cookie.set('lang', this.currentLang.lang, { expires: 7 });        
        window.location.reload();
    },
},

在模板中，多语言语法表现如预期，但 JS 语法不是。它注意显示某种语言，问题出在哪里？谢谢！

Answer 1

showLangSelector 拼写错误。同样reloading 页面将破坏整个 vue 组件并从头开始重建一个，因此 reload 上面的 this.foo = bar 设置将不起作用，因为在重新加载的页面中，它们从未发生过，你只有一个全新的vue 组件。