JS组件封装之监听localStorage的变化

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;

<template>
  <div>
    <h2>测试页面</h2>
    <h4>{{value}}</h4>
  </div>
</template>
 
<script>
  import dispatchEventStroage from '@/utils/tools'
export default {
  data () {
    return {
      value:"000",
      num:1
    }
  },
  mounted () {
    let _this = this
    dispatchEventStroage("title")
    window.addEventListener("setItemEvent", function (e) {
    if (e.key === "title") {
      console.log(e.newValue)
      _this.value = e.newValue
    }
  })
    setInterval(()=>{
      this.num += 1
      localStorage.setItem("title",this.num);
    },1000)
  }
}
</script>
 
<style>
</style>