最近在做項目的時候想要根據本地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值的變化的方法了
如果這篇文章對你有幫助，或者在進行中遇到其他問題，歡迎評論區留言出來。
我們一起探討~