前情提要
React 项目，Vue 项目实现相同功能，页面长辈版标准版样式切换
方案一 react hooks
用户的状态存储在本地 localStorage
window.dispatchEvent(event); 触发自定义事件，配合监听器，监听自定义事件的执行
当hooks中的状态发生改变时，组件会重新渲染
export default function useChangeMode() {
let [change, setChange] = useState<boolean>(!!localStorage.getItem('mode'));
useEffect(() => {
let originSetItem = localStorage.setItem;
let originRemoveItem = localStorage.removeItem;
localStorage.setItem = function (key, value) {
let setItemEvent: any = new Event('setStorageEvent');
originSetItem.apply(this, [key, value]);
window.dispatchEvent(setItemEvent);
};
localStorage.removeItem = function (key) {
let removeItemEvent: any = new Event('removeStorageEvent');
originRemoveItem.apply(this, [key]);
window.dispatchEvent(removeItemEvent);
};
}, []);
useEffect(() => {
window.addEventListener('setStorageEvent', () => {
if (localStorage.getItem('mode')) {
setChange(true);
}
});
window.addEventListener('removeStorageEvent', () => {
if (!localStorage.getItem('mode')) {
setChange(false);
}
});
}, []);
return [change];
}
方案二 Vue全局变量绑定
vue2 在 new Vue() 初始化 的时候在 data 中设置一个全局变量
new Vue({
data: {
odler: false,
},
mounted() {
// 自定义事件，逻辑同上
}
})
使用TS的写法， computed 获取全局上的 older
get isOlder(): boolean {
return (this as any).$root.odler;
}
扩展应用场景
- 用户切换页面主题，比如黑夜/白天模式
