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 类似的效果，我这里只是一种使用场景.
