13-0719 vue-element-admin 引入国际化组

步骤

3 vue技巧

3.1 computer get&set

一般情况下，我们只是使用了computer中的gettter属性，默认只有 getter，我们只是单纯的使用了gettter属性，通过定义一个function 变量实现； XXX:function(){ return ...}
这里使用了get|set, set处理时语言环境时，额外存入cache，这里定义了一个对象，里面含有get|set函数,注意这里触发 set的方法 this.lang = this.lang, 它实际触发set完后，再触发get实时刷新；

  computed: {
    lang: {
      get() {
       return this.$t('settings.lanhint')
      },

      set(lang) {
        //通过get 取设置真实的lang,set 的入参lang，是当前的lang，成了一个逻辑flag
        if (this.$store.state.app.language == 'zh') {
          this.$i18n.locale = 'en'
          this.$store.dispatch('app/setLanguage', 'en')
          return
        }

        if (this.$store.state.app.language == 'en') {
          this.$i18n.locale = 'zh'
          this.$store.dispatch('app/setLanguage', 'zh')
        }
      }
    }
  },
  methods: {
    changeLanguage() {
      //触发lang.set(), 然后再触发lang.get()
      this.lang = this.lang
    },

3.2

import { generateTitle } from '@/utils/i18n'

 methods: {
    generateTitle,
}

import 引入后，再methods中声明下，不声明是否也可

4 调用方式

4.2.1 配置文件

.lang/en.js 英文配置文件
.lang/zh.js 中文配置文件

developer 在这里配置中英文翻译,且分层配置，比如 i18nView.note 指i18nView下的note属性

4.2.2 调用方式

// html 调用方式
$ {{ $t('i18nView.note') }}

// javascript 调用方式
$ this.$t('i18nView.one')

不错的指南

4.2.3 一些相关文件