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` 函数的回调。