vue3 监听sessionStorage变化

在Vue3中监听`sessionStorage`的变化，可以借助`watch`或者`MutationObserver` API。以下是两种方法的示例：

**使用 watch 方法：**

import { watch } from 'vue';

export default {
  setup() {
    const handleSessionStorageChange = () => {
      // 检查 sessionStorage 是否有更新
      if (sessionStorage.getItem('yourKey')) {
        console.log('sessionStorage changed');
        // 在这里处理更新后的值
      }
    };

    watch(() => sessionStorage, handleSessionStorageChange); // 监听整个 sessionStorage

    return { handleSessionStorageChange };
  },
}

在这个例子中，当`sessionStorage`中的内容改变时，`handleSessionStorageChange`函数会被触发。

**使用 MutationObserver：**

import { onMounted } from 'vue';
import { observe } from 'immer'; // 如果你的项目用了 Immer，需要引入这个库

onMounted(() => {
  const observer = new MutationObserver(mutationsList => {
    mutationsList.forEach(mutation => {
      if (mutation.type === 'childList') { // 只关注添加、删除节点的情况
        const key = mutation.addedNodes.textContent || mutation.removedNodes.textContent;
        console.log(`sessionStorage changed: ${key}`);
        // 处理变化
      }
    });
  });

  observer.observe(window.sessionStorage, { attributes: false, childList: true, subtree: true }); // 监听指定的对象
});

记得在不再需要监控时调用`observer.disconnect()`关闭观察。