vue watch 监听 window.sessionStorage

Vue中的watch选项可以用来监听一个Vue实例中的数据变化，当数据发生变化时，watch函数会自动执行。而window.sessionStorage是一种浏览器存储机制，可以用来在同一浏览器的不同页面之间共享数据。要在Vue中监听window.sessionStorage的变化，可以通过以下方式进行：

watch: {
  '$sessionStorage.yourData': function (newValue, oldValue) {
    // 监听 window.sessionStorage 中 yourData 的变化
    // newValue 为变化后的值，oldValue 为变化前的值
    // 这里可以进行相应的操作
  }
}

在上述代码中，`$sessionStorage` 是 Vue 的插件 `vue-session` 提供的全局属性，可以直接访问 `window.sessionStorage` 中的数据。当 `yourData` 数据发生变化时，`watch` 中定义的函数会自动执行。

相关问题

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()`关闭观察。

vue监听sessionstorage变化

要监听 SessionStorage 变化，您可以使用 Vue 的 `$watch` 函数来监视 SessionStorage。具体方法如下：

1. 在 Vue 组件中，使用 `$watch` 函数来监听 SessionStorage 的变化。例如：

export default {
  created() {
    window.addEventListener('storage', this.onStorageChange)
  },
  methods: {
    onStorageChange(event) {
      if (event.key === 'myKey') {
        // 处理 SessionStorage 变化的逻辑
      }
    }
  }
}

在上面的代码中，我们使用 `window.addEventListener('storage', this.onStorageChange)` 来监听 SessionStorage 的变化，并在 `onStorageChange` 方法中处理变化的逻辑。

2. 如果您想在多个组件中共享相同的 SessionStorage，可以将 SessionStorage 封装在一个单独的模块中，然后在多个组件中使用该模块。例如：

const storage = {
  fetch(key) {
    return JSON.parse(window.sessionStorage.getItem(key))
  },
  save(key, data) {
    window.sessionStorage.setItem(key, JSON.stringify(data))
  }
}

export default storage

在上面的代码中，我们定义了一个 `storage` 对象，它包含了 `fetch` 和 `save` 两个方法来读取和保存 SessionStorage。然后我们将 `storage` 对象导出，以便在其他组件中使用。

3. 在其他组件中使用 `storage` 模块。例如：

import storage from './storage'

export default {
  created() {
    this.$watch(() => storage.fetch('myKey'), (newValue, oldValue) => {
      // 处理 SessionStorage 变化的逻辑
    })
  }
}

在上面的代码中，我们使用 `this.$watch` 函数来监听 `storage.fetch('myKey')` 的变化，然后在回调函数中处理变化的逻辑。这样，在任何一个组件中修改了 SessionStorage，都会触发所有组件中 `$watch` 函数的回调。