ant-design-vue组件国际化(en/zh-cn)

国际化是大多后数后台项目所必须的一项功能。antd的国际化做起来也不会太难。与element类似，同样是使用官方适配的国际化组件和配合vue-i18n来实现业务。在这里vue-i18n就不做过多的赘述了，讲讲后台管理系统如何做组件国际化。项目在线地址 (有用的话，记得给个start哦)

按照官方文档: LocaleProvider 使用 Vue 的 provide/inject 特性，只需在应用外围包裹一次即可全局生效。即把需要做住国际化的组件使用 ‘a-locale-provider’ 标签包裹起来即可。但是这里会有一个问题，控制台会报warning:

这个warning的意思是LocaleProvider的a-local-provider已经弃用了，我们需要使用a-config-provider将其替换就好了。

为了减少不必要的麻烦(一次性包裹所有组件)我们只需要需要把App组件包裹起来就ok了。

<a-locale-provider :locale="locale">
   <div id="app">
     <router-view />
   div>
 a-locale-provider>

按照官方文档说明，默认是英文，所以local的初始值(默认值)可以设为null，如果默认使用中文，直接按照官方文档来操作即可。

import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('en')

文章进行到这里，如果所有都按照官方文档来那就没必要写此篇博客了。上文说到，我们在App组件使用‘a-locale-provider’标签将所有组件包裹起来。为了配合vue-i18n当然还需要进行一些配置的。
我们在切换语言的时候，肯定要对组件也进行相应的切换，在这个项目里，我使用$bus来进行组件间的通信(语言切换封装成一个组件，切换的时候通知App组件进行相应的切换即可)

// langSelect(语言选择组件)发送通知改变当前语言
this.$bus.$emit('change-language')
// App组件初始化语言及接收通知做初始化
mounted() {
     
  if (this.language === 'zh-cn') this.locale = this.zhCN
  else this.locale = null
  moment.locale(this.language)
  this.$bus.$on('change-language', async() => {
     
    var language = await this.$store.getters.language
    if (language === 'zh-cn') this.locale = this.zhCN
    else this.locale = null
    const languageList = ['en', 'zh-cn']
    if (languageList.includes) {
     
      moment.locale(language)
    }
  })
}

除此之外，我们还需监听language的变化进行同步修改

watch: {
     
  language: {
     
    handler: function(val, oldval) {
     
      moment.locale(val)
    },
    deep: true
  }
}