1.项目新增一个tool.js文件,复制代码如下:
//****将这段内容放在tool.js文件中****
// 重写setItem事件,当使用setItem的时候,触发,window.dispatchEvent派发事件
function dispatchEventStroage() {
const signSetItem = localStorage.setItem
localStorage.setItem = function (key, val) {
let setEvent = new Event('setItemEvent')
setEvent.key = key
setEvent.newValue = val
window.dispatchEvent(setEvent)
signSetItem.apply(this, arguments)
}
}
export default dispatchEventStroage;
2.main.js中引入该js:
import tool from "./plugins/tool.js";
Vue.use(tool);
3在需要监听的文件中:
//解决this指向问题,在window.addEventListener中this是指向window的。
//需要将vue实例赋值给_this,这样在window.addEventListener中通过_this可以为vue实例上data中的变量赋值
let _this=this;
//根据自己需要来监听对应的key
window.addEventListener("setItemEvent",function(e){
//e.key : 是值发生变化的key //例如 e.key==="token" //e.newValue : 是可以对应的新值
// console.log(e)
if(e.key==="InteligenceData"){
let newV = JSON.parse(e.newValue)
newV.forEach((item)=>{
item.type = '1' // 为拆条列表添加进来的数据加一个type
if(item.ip_type == 3){
_this.audioData.push(item)
}else{
_this.InteligenceData.push(item)
}
})
}
})
参考https://www.jb51.net/article/261226.htm