前端开发--记录VUE中监听sessionStorage变化

// 全局获取缓存数据
Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'menuItem') {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val);

        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);

        // 派发对象
        window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal);
  }
},
复制代码

 this.resetSetItem("menuItem", JSON.stringify(keyPath));
复制代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <label>{{ chooseValue }}</label>
    <router-link :to="{ name: 'HelloWorldTwo' }">jump </router-link>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Hello World One",
      chooseValue: "",
    };
  },
  mounted() {
    window.addEventListener("setItem", this.printLog);
  },
  //页面销毁
  beforeDestroy() {
    window.removeEventListener("setItem", this.printLog);
  },
  methods: {
    printLog() {
      console.log("监听到数据变化");
      this.chooseValue = sessionStorage.getItem("menuItem");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
复制代码