Parlons de la façon d'actualiser la page actuelle dans vue3

1. Scénario commercial

Généralement, lorsque nous supprimons ou modifions les données du tableau, nous demanderons à nouveau à l'interface d'actualiser les données du tableau. Si plusieurs interfaces doivent être demandées en même temps, vous ne pouvez pas ajuster chaque interface une par une. Nous devons utiliser un moyen plus convivial pour y parvenir.

2. Idées d'implémentation

La première et la plus intuitive consiste à actualiser directement la page actuelle, par exemple en utilisant les méthodes location.reload et $router.go(0). Cependant, cette méthode entraînera un écran blanc sur la page, ce qui n’est pas convivial. Alors pouvons-nous actualiser le composant vue actuel ? Nous savons que lorsqu'un composant Vue est restitué, tout son cycle de vie sera à nouveau exécuté et l'interface sera naturellement à nouveau sollicitée. Alors comment rafraîchir le composant actuel ? La première consiste à contrôler le rendu du composant de la page actuelle via v-if. Dans le cas du composant de rendu router-view, nous ajoutons directement v-if à router-view. Ensuite, en contrôlant cette condition de jugement, par exemple, nous l'appelons isRouterAlive. location.reload和$router.go(0)方法。但是这种方式会导致页面会有白屏情况，不友好。那么我们能不能刷新当前的vue组件呢？我们知道当vue的组件重新渲染以后它的整个生命周期会重新执行一遍，接口自然而然的也会重新请求一遍的。那么多如何刷新当前组件呢？首先是通过v-if来控制当前页面组件的渲染。在有router-view渲染组件的情况下，我们直接把v-if加在router-view上面。然后通过控制这个判断条件，比如我们就叫做isRouterAlive。

那么这个判断条件如何控制呢？因为涉及到跨组件通信，所以需要使用provide/inject。在router-view组件中通过provide提供一个relaod方法，当删除或者编辑完成表格数据以后，使用inject触发reload方法。在reload方法里面我们来控制判断条件。当realod的时候isRouterAlive=false,紧接着在nextTick中设置为true,这样就可以实现组件重新加载了。

下面我们来看看代码逻辑的实现。

3.代码实现

首先修改router-view

3. Implémentation du code

Modifiez d'abord le composant de rendu router-view

<template>
  <div class="main">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
	export default {
    provide(){
        return {
            reload: this.reload
        }
    },
    data(){
        return {
            isRouterAlive: true
        }
    },
    methods: {
        reload(){
            this.isRouterAlive = false
            //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件
            this.$nextTick(() => {
              this.isRouterAlive = true  
            })
        }
    }
  }
</script>

<template>
  <div>
    首页
    <button @click="handleSubmit">刷新</button>
  </div>
</template>

<script>
export default {
  //通过inject获取祖先元素的reload方法
  inject: [&#39;reload&#39;],
  data() {
    return {
      isRouterAlive: true,
    }
  },
  methods: {
    handleSubmit() {
      // 假如这是一个编辑提交事件
      // 这里是编辑请求的各种逻辑和接口...
      // 编辑执行成功，就刷新当前页面，请求reload
      this.reload()
    },
  },
}
</script>