vue局部组件刷新

背景： UI框架：antd vue，一个导入文件的功能，导入成功之后列表页的数据就会改变，但是我这边导入成功之后，打印的数据是更新了，页面却没有更新…
对此我的解决方法是导入成功之后，局部刷新列表组件，原理控制路由的显示隐藏(v-if)，由路由的显示隐藏达到组件重新渲染的效果。
首先：我们在App.vue中，定义一个变量(isRouterAlive)为true,控制路由的显示隐藏，然后定义一个方法（reload）,调用该方法之后组件重新刷新，然后必须要将这个方法定义在provide注入依赖，其子孙都可以用这个属性
代码如下：

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

<script>
export default {
  provide () {
    return {
      reload: this.reload

    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style>
  #app {
    height: 100%;
  }
</style>

然后：在需要局部刷新的页面调用inject: [‘reload’]，在导入成功之后再调一遍数据，后加入this.reload()就可以实现了
代码图片截图如下：

并且你获取数据需要使用async 和await ，只有将数据加载完之后在掉reaload方法才能有效，然后就可以实现导入成功时候，页面页刷新了。