Vue3 使用 provide inject 刷新路由

Vue3 中使用 provide inject 刷新部分路由页面

• 其中原理就是使用 provide 提供一个 reload 方法，在需要刷新的页面用 inject 调用 reload 使路由刷新，从而达到效果

我的使用背景

• 当需要点击某个事件拿到参数刷新当前页面，拿着新的参数请求后端，展示不同的内容
• 当前也可以写两个路由页面来回跳（感觉有些SB）

为什么要这么做？不直接使用 location.reload()，这么做的好处是？

• 1不需要重新加载资源，因为页面刷新一些资源文件要重新加载
• 2 刷新后不管是全局变量的数据还是 Vuex 数据都会丢失

但是使用它的弊端是：

• 无感知，只会刷新当前页面的生命周期，从产品的角度不够人性化（虽达到了目的，但体验不好），所以需要手动加一些 loading 效果

// App.vue
<template>
  <router-view v-if="showPage"/>
</template>
<script lang="ts">
import { defineComponent, nextTick, provide, ref } from 'vue'
export default defineComponent({
  setup () {
    const showPage = ref<boolean>(true)
    const onRefresh = () => {
      showPage.value = false
      nextTick(() => {
        showPage.value = true
      })
    }
    provide('reload', onRefresh)
    return {
      showPage
    }
  }
})
</script>

• 调用的页面

<script lang="ts">
import { defineComponent, inject } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup () {
    const store = useStore()
    const onRefresh = inject<Function>('reload')

    const handleClick = () => {
      // 更新 Vuex 
      store.commit('setMatchUserId', 123)
      // 刷新当前页面
      onRefresh && onRefresh()
    }
    return {
      handleClick
    }
  }
})
</script>

• 依赖注入可以很多使用方式，例如传参，没有组件层级的限制，也能使用 Vuex 类似的效果，我这里只是一种使用场景.