vue3.x 使用 provide，inject 重载页面数据

╰半橙微兮° 2022-09-16 04:54 69阅读 0赞

### 1. 场景：在增加，修改或者删除一条记录的后希望当前页面可以重新刷新 ###

### 2. 使用 provide，inject，nextTick 实现 ###

2.1 App.vue 生产者提供者provide，提供刷新方法

<template>
      <div class="sofa-admin-app">
        <router-view v-if='isRouterAlive'/>
      </div>
    </template>
    
    <script>
    import {  defineComponent, reactive, toRefs, provide, nextTick } from 'vue'
    export default defineComponent({ 
      name: 'App',
      setup () { 
        const data = reactive({ 
          isRouterAlive: true
        })
        const reload = () => { 
          data.isRouterAlive = false
          nextTick(() => { 
            data.isRouterAlive = true
          })
        }
        provide('reload', reload)
        return { 
          ...toRefs(data),
          reload
        }
      }
    })
    </script>

2.2 子组件消费者使用者注入依赖，直接调用

import {  defineComponent, reactive, toRefs, onMounted, inject } from 'vue'
    export default defineComponent({ 
    	setup () { 
    		const reload = inject('reload')
    	}
    	const deleteBusArea = () => { 
          ElMessageBox({ 
            title: '提示',
            message: `${ busArea.deleName}有${ busArea.deleSonNumber}个下属区域，删除后其下区域将一并删除<br/>${ busArea.deleName}或其下属区域下存在督导/拓展，删除此区域后，督导/拓展对应的区域请及时维护`,
            dangerouslyUseHTMLString: true,
            showCancelButton: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消'
          }).then(() => { 
            api.businessArea.deleteCodeUp({  code: busArea.deleCode }).then(res => { 
              reload()
            })
          }).catch(() => { 
            busArea.busAreaType = 0
          })
        }
    	return { 
    		reload,
    		deleteBusArea 
    	}
    })

2.3 vue3.x nextTick的用法区别于vue2.x，vue3.x 引入依赖后直接使用

import {  reactive, toRefs, nextTick } from 'vue'
    setup () { 
      const data = reactive({ 
        isRouterAlive: true
      })
      const reload = () => { 
        data.isRouterAlive = false
        nextTick(() => { 
          data.isRouterAlive = true
        })
      }
      return { 
        ...toRefs(data),
        reload
      }
    }

[刷新页面的其他方法][Link 1]

[Link 1]: https://www.jb51.net/article/151984.htm