后台管理系统中刷新业务功能的实现

实现

由于刷新业务涉及路由通信所以在store/pinia创建全局变量refresh

    state:()=>{
        return{
            // 是否刷新
            refresh:false,
        }
    },

在header组件中是为刷新按钮绑定点击实现并对refresh取反操作

在一级路由组件内监听是否刷新

// 刷新完毕后加载组件

const { collapse,refresh } = storeToRefs(useSettingStore())
const loading=ref(false);

// 监听是否刷新
watch(()=>refresh.value,()=>{
    loading.value=true;
    // dom渲染完毕后loading改为false
    nextTick(()=>{
        loading.value=false;
    })
})

效果