最近在做项目的时候想要根据本地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值的变化的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
