vue3实现动态监听sessionstorage的变化思路

        今天做xx管理系统前端部分的时候，登录页面和注册页面界面一致使用view-router用路由守卫就能实现切换，在做功能页面的时候和登录页模板比较不一致，有一些组件可以复用为了更好模块化打算结合v-if区分渲染登录页和功能页面。根据访问的页面类型使用不同的模板组装。所以在router中访问功能页面前在会话存储中加点数据，App.vue在根据数据切换模板。

        要动态监听storage，我的想法是自定义事件，在router存入数据时后主动触发事件，App再通过事件监听器触发主动读值的操作。

1.首先在发生storage改变的模块中自定义事件,在要接收的组件上也要定义 一个同名事件实例

接收处：

let newStorageEvent = new CustomEvent("update",{
          bubbles:true, //是否冒泡
          cancelable:true //是否可停止，这两个可不写放空
          })

这是一个内容为空的update事件，只用做触发

修改storage组件注册事件，并dispatch发布：

let newStorageEvent = new CustomEvent("update",{
    key:"flag",
    value:(Boolean)(window.sessionStorage.getItem("flag"))
    //key,value没用到都可以不写 
  })
router.beforeEach((to, from, next) => {
    if(to.path=="/header"){
        window.sessionStorage.setItem("flag",true)
        //此时修改了flag值，主动在整个页面发送事件实例
        window.dispatchEvent(newStorageEvent)//dispatchEVent(事件实例)用于向整个页面
                                            //发送这个事件，需要做出响应的事件监听器就会接收                    
                                             //到
        console.log("跳转1")
        next()
    }

2.随后到要监听storage改变的组件上注册监听器

let toheader=ref(false)
onMounted(()=>{ //onMounted组件装载后添加监听器
let fun1=()=>{
  if(window.sessionStorage.getItem("flag")=="false")
  {return false}
  else{
    return true
  }
}//fun1是切换代码与实现storage监听无关
window.addEventListener("update",()=>{ //事件监听update，注意接受处也要注册update事件，否则不能监听到
toheader.value=fun1() 
console.log((window.sessionStorage.getItem("flag")))
})  

})

此时如果访问/header就会存储参数，触发主页面监听是否要切换页面模板。

文章仅记录学习时解决问题日常，写法仅代表个人思路，非最优解。