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) => {});
}
为了网页性能,记得移除监听哦!