Vue监听sessionStorage变化

在Vue.js中，如果你想监听`sessionStorage`的变化并作出响应，可以使用`watch`属性或者`Object.observe()` API（在旧版浏览器中可用），但是Vue本身并不直接提供对`sessionStorage`的监听功能。你可以自定义一个组件或服务来实现这个需求。

以下是一个基本的例子，展示如何使用`MutationObserver`来监听`sessionStorage`的变化：

import { watch } from 'vue';

export default {
  data() {
    return {
      sessionStorageKey: 'mySessionData',
    };
  },
  created() {
    this.startWatchingSessionStorage();
  },
  beforeDestroy() {
    this.stopWatchingSessionStorage();
  },
  methods: {
    startWatchingSessionStorage() {
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.type === 'childList') {
            // 如果数据有增加或删除，更新视图或执行相应操作
            console.log('sessionStorage changed:', mutation.addedNodes);
          }
        });
      });

      // 被观察的对象（这里是sessionStorage）
      const target = window.sessionStorage;
      observer.observe(target, { attributes: true, childList: true, subtree: true });
    },
    stopWatchingSessionStorage() {
      // 当组件销毁时停止观察
      if (this.observer) {
        this.observer.disconnect();
      }
    },
  },
};