vue2中created函数添加事件监听后监听的执行问题?
created() {
var _this = this;
// if (sessionStorage.getItem("username") === '' || sessionStorage.getItem("username") === null) {
// _this.username = "";
// } else {
// _this.username = sessionStorage.getItem("username");
// }
window.addEventListener('setItem', () => {
_this.username = sessionStorage.getItem("username");
console.log('触发了检测函数')
// alert(_this.username);
})
}
我在A页面中的created中添加了一个监听session改变的函数,当从登录页面B登录后,session对应数据项被更改,并重定向到页面A,此时直接执行了事件监听函数,打印了相关信息;但是我用调试工具查看时username的值却与控制台打印的不一致,并且页面上的v-if标签使用的值是调试工具中显示的。如果把注释取消,即在事件监听器前赋值,则username可以正常赋值。我有两点疑问:重定向到页面后,1.事件监听器如果被触发了,为什么username的值在调试工具中却没有改变 2.如果没有被触发,为什么却在控制台打印了相关信息?
回复
1个回答

test
2024-07-16
球球了各位老爷们,用一下 eventBus
或者 vuex
吧.....
算了还是回答一下吧,你在 页面A
的 created
生命周期里才创建了对 setItem
事件的监听。
- 在 页面A 创建并打开之前,这个监听是不存在的。
- 创建监听之后并不会运行
setItem
事件,需要你手动去操作一次setItem
。
所以就是你能在控制台看到 log
可能是由于你没有在销毁页面的时候去注销掉这个监听事件,所以导致你的监听一直存在于内存当中。
另外一个就是,你是否在 页面A 中的 data
里面声明了 username
,如果没有的话,username
这个变量是不会被 Vue
监听的,即改变了之后并不会触发更新。直到另外一个被Vue
监听的属性发生了改变才会在视图及VueDevTools
里更新。
最后,我的建议是通过 eventBus
来处理这种跨页面的属性,或者使用 Vuex
。并不建议使用 sessionStorage
及 localStorage
来实现这个功能。
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容