Vue 监听localStorage

1、在utils目录下建tool.js文件，文件代码如下

// 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
function dispatchEventStroage() {
  const signSetItem = localStorage.setItem
  localStorage.setItem = function(key, val) {
    let setEvent = new Event("setItemEvent")
    setEvent.key = key
    setEvent.newValue = val
    window.dispatchEvent(setEvent)
    signSetItem.apply(this, arguments)
  }
}

export default dispatchEventStroage;

2、在main.js加如下代码 

import tool from "./utils/tool";

Vue.use(tool);

3、PageA页面，改变并监听localstorage，可搭配Vuex使用，以免初始化时值固定为默认值，而不是localstorage.setItem之后的值。

computed: {
    elderUiStyle: {
      get() {
        return this.$store.state.elderUiStyle
      },
      set() {}
    }
},

methods: {
    onSwitchVersions() {
      const styleVal = JSON.parse(localStorage.getItem("elderUiStyle"))
      localStorage.setItem("elderUiStyle", !styleVal)
    }
}，

mounted() {
    //根据自己需要来监听对应的key
    window.addEventListener("setItemEvent", (e) => {
      //e.key : 是值发生变化的key
      //e.newValue : 是可以对应的新值
      if (e.key === "elderUiStyle") {
        this.$store.commit("SET_ELDERUISTYLE", e.newValue) // 可搭配Vuex使用，以免初始化时值固定为默认值，而不是localstorage.setItem之后的值
      }
    })
},

destroyed() {
    window.addEventListener("removeItemEvent", (e) => {});
},

4、PageB页面，根据监听到到的localstorage改变相应的值

mounted() {
    //根据自己需要来监听对应的key
    window.addEventListener("setItemEvent", (e) => {
      //e.key : 是值发生变化的key
      //e.newValue : 是可以对应的新值
      if (e.key === "elderUiStyle") {
        this.elderUiStyle = e.newValue;
      }
    })
},

// 移除监听
destroyed() {
    window.addEventListener("removeItemEvent", (e) => {});
}

为了网页性能，记得移除监听哦！