vue监听sessionStorage

在 Vue 中，可以使用 $watch 方法来监听 sessionStorage 的变化。

首先，在 Vue 实例中定义一个名为 sessionStorage 的 data 属性，并在 created 钩子函数中初始化它。

new Vue({
  data: {
    sessionStorage: JSON.parse(sessionStorage.getItem('yourKey'))
  },
  created() {
    this.$watch('sessionStorage', (newValue, oldValue) => {
      sessionStorage.setItem('yourKey', JSON.stringify(newValue));
    }, { deep: true });
  }
});

然后，使用 $watch 方法来监听 sessionStorage 属性的变化。在监听回调函数中，使用 sessionStorage.setItem() 方法来更新 sessionStorage。

当然你也可以使用 vuex 实现，通过在 Vuex 中使用插件来监听 sessionStorage 的变化。

相关问题

Vue监听sessionStorage数据

在Vue.js中，由于`sessionStorage`是浏览器原生的，并非Vue直接提供API来监听它的变化。不过，你可以结合浏览器提供的事件监听机制，再加上一些辅助函数，来实现类似的效果。这里是一个简单的示例，展示如何手动监听`sessionStorage`的变化：

// 定义一个全局的watcher
const observeSessionStorage = (key, callback) => {
  const previousValue = sessionStorage.getItem(key);

  window.addEventListener('storage', (event) => {
    if (event.key === key && event.newValue !== previousValue) {
      callback(event.newValue);
      previousValue = event.newValue;
    }
  });
};

// 在需要的地方使用
observeSessionStorage('yourKey', (newValue) => {
  console.log(`New session storage value: ${newValue}`);
});

// 取消监听时
window.removeEventListener('storage', (event) => {
  if (event.key === 'yourKey') {
    // 移除监听或清理回调
  }
});

请注意，这只是一个基本的实现，实际应用中可能需要考虑更复杂的情况，比如错误处理、移除监听等。

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();
      }
    },
  },
};