vue中如何监听localStorage值的变化

最近在做项目的时候想要根据本地localstorage里面个别值得变化来做一些事情，就比如监听locale（这是我做国际化需要使用的变量）。

思路：重写localStorage的setItem方法。

当我们在调用 setItem 方法的时候，添加new Event('setItemEvent')，再使用window.dispatch() 方法派发事件，就可以通过 window来监听当前事件

/src/plugins/locale.js

export default function dispatchEventStroage () {
  let 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)
  }
}

main.js

import tool from '@/plugins/locale'
Vue.use(tool)

suibian.vue

<script>
mounted() {
  window.addEventListener('setItemEvent', (e) => {
    console.log(e)
  })
}
</script>

以上就是vue中如何监听localStorage值的变化的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~