灏天阁

记录VUE中监听sessionStorage变化

· Yin灏

1、背景

前段时间项目上有个需求，在菜单栏进行切换应用的时候，页面的数据要进行刷新。如下图所示：

image.png 当点击切换顶部的菜单后，下面的内容区域的数据进行刷新。

目前菜单栏的信息我是通过 sessionStorage 存储到本地的，于是想着如果可以监听 sessionStorage 的变化， 那么我根据变化去加载页面的数据效果会好很多。

当然了刷新页面也有其它的做法，比如整个页面进行刷新 relaod，但是效果太差了。

2、实现

2.1 在 main.js 中添加全局获取缓存数据

// 全局获取缓存数据
(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);
  }
}),

根据自己的需求去设置 “key”

2.2 在需要保存数据的地方进行调用

image.png 如上图所示，在切换菜单的时候对选中的菜单数据进行保存。

this.resetSetItem("menuItem", JSON.stringify(keyPath));

2.3 在需要获取选中菜单数据的地方进行 sessionStorage 变化监听

<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>

mounted：页面创建的时候添加监听

beforeDestroy： 在页面销毁的时候移除监听

通过上面三步就可以实现监听 sessionStorage 的变化了。

3 操作效果图

GIF 2021-11-8 10-33-38.gif

- Book Lists -