vue-i18n 用法及插件值

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Thekingyu/article/details/80435857

npm install vue-i18n

在main.js中引入vue-i18n

import VueI18n from 'vue-i18n'

import LangEn from '../static/en'
import LangZhCHS from '../static/zhCHS'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 语言标识
  messages:{
    'en': LangEn,
    'zhCHS': LangZhCHS,
  }
})

挂载到Vue的实例上

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

en.js里为

module.exports={
  message: {
    hello: 'hello',
    about: 'about',
    welcome: "Welcome"
  }
}

用发为

{{ $t("message.welcome") }}

在js中去掉双引号，，如果插件里用值的话应用this指向

属性中用法

:placeholder="$t('placeholder.enter')"

遇到的问题： 
绑定在data中的值，在切换中英文时不会自动更新，正在寻找解决办法，如有高手知道，可以指点一二。

2018.03.22自答：
去 vue-i18n 提了 issue 才知道是我对 vue 理解不够深刻，
绑定在data中不会自动更新的原因是 Vue 组件中的 data 属性只会在组件实例化时候后计算一次
解决办法是，写在 computed props 里

https://github.com/kazupon/vue-i18n/commit/d007ac8e91261dda63eb9ce95cf2b7bb73bf7968

 props: {
    dialogTitle:{
        type: String,
        default: ()=>{this.$t('notice')}
    }
  }