iview-admin多语言切换文字刷新异常的统一解决方案（table表头同理）

前言：摸iview-admin的多语言切换功能。
问题：发现例子只做了菜单和面包屑的语言切换，我在data里定义的文本无法实时切换
代码版本：以iview-admin2.0源码做实验

代码1.0如下

home.vue

export default {
  name: 'home',
  data () {
    return {
      inforCardData: [
      	//我就改了this.$t(...)
        { title: this.$t('home_user_increment'), icon: 'md-person-add', count: 803, color: '#2d8cf0' },
        { title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
        { title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900' },
        { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
        { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
        { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
      ],
      ...

效果1.0示意

原因分析：

data里的数据this.$t('home_user_increment')在渲染时已经“定死”了，在切换语言时，并没有对界面里的该数据this.$t('home_user_increment')进行重新执行更新，显然无法实现语言切换。

解决思路：

针对分析，咱想办法把this.$t('home_user_increment')这玩意儿在触发切换语言后再执行一下，细想了下vue的触发更新，于是思路如下走：

1. 首先想到了watch，但是要考虑到之后界面所有文本都需要切语言的啊！！！你watch不累吗
2. 不对呀，只需要watch lang就可以了，正好language.vue这个多语言组件切换的实现也是用的watch: {lang (lang) {this.$i18n.locale = lang}}我们只需要在这里执行相关更新的代码就应该能行了
3. 好，触发方式ok了，执行怎么样的更新呢？为了满足我们的需求，我们得刷新整个界面的文本
4. 那刷新整个界面的文本 = 刷新整个界面，那我直接刷app.vue这个根组件就行了嘛
5. 我就采用了vue的provide和inject方法，app根组件这用v-if来进行界面重载，不了解provide和inject的走你

so！代码2.0如下：

App.vue

<template>
  <div id="app">
    <router-view v-if="toggleFlag"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide () { // 在app组件这提供一个方法
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      toggleFlag: true
    }
  },
  methods: {
    reload () {
      this.toggleFlag= false
      //等v-if重载渲染后再把值赋值回来重新再渲染【关了界面再开。大家如果有更好的方法欢迎留言讨论】
      this.$nextTick(function () {
        this.toggleFlag = true
      })
    }
  }
}
</script>

language.vue

export default {
  name: 'Language',
  inject: ['reload'], //接受App那边提供的方法
  props: {
    lang: String
  },
  data () {
    return {
      langList: {
        'zh-TW': '繁体',
        'zh-CN': '中文',
        'en-US': '英文'
      },
      localList: {
        'zh-TW': '中文繁体',
        'zh-CN': '中文简体',
        'en-US': 'English'
      }
    }
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang
      console.log('reload!!!!!!')
      this.reload() //在触发切换语言后调用，相当于直接调用app里写的reload方法
    }
  },

最后是在locale/lang文件下的语言包文件

zh-CN.js文件
export default {
	...
	home_user_increment: '新增用户'
}

zh-TW.js文件
export default {
	...
	home_user_increment: '新增用戶'
}

en-US.js文件
export default {
	...
  	home_user_increment: 'User Increment'
}

最後是效果圖


效果达成，看来我走向国际市场，走向人生巅峰指日可待了呀 ，我还是继续敲代码吧。
看完觉得方法不错点个赞呗3，有更好的方法欢迎大佬们赐教