vue:监听页面缓存事件

时间:2025-04-08 07:14:17

事情的起因是这样的:

项目中需要用到websocket,在网页刚打开的时候,就要进行对话的连接绑定,就我这菜鸟来说,第一次这么搞事情,也是刚接触websocket没多久,这咋整啊?在中设置了绑定,所有的信息返回都在组件里面,但是其他组件怎么去获取?而且需要缓存到本地。而当初我还没接触vuex,所以在其他组件里面获取服务器返回的信息只能借助于localStorage,这就郁闷了,这缓存咋监听呀?

首先在里面配置vue原型:

 = (key, newVal) => {
  if (key === 'websocketHistory') {
    // 创建一个StorageEvent事件
    let newStorageEvent = ('StorageEvent');
    const storage = {
      setItem: (k, val) => {
        (k, val);
        // 初始化创建的事件
        ('setItem', false, false, k, null, val, null, null);
        // 派发对象
        (newStorageEvent);
      }
    };
    return (key, newVal);
  }
};

这个时候,在其他页面写入缓存就不能直接用localStorage了

你需要这么设置

('websocketHistory', data);

然后在需要监听的页面中,created函数中使用

('setItem', () => {
  ((('websocketHistory')));     
});

如此,便能在组件中使用获取服务器返回的信息并存入缓存,在其他组件,比如回话列表页面就可以实时更新列表,包括对话页面。