长辈版页面方案&全局变量的应用场景

前情提要

React 项目，Vue 项目实现相同功能，页面长辈版标准版样式切换

方案一 react hooks

用户的状态存储在本地 localStorage
window.dispatchEvent(event); 触发自定义事件，配合监听器，监听自定义事件的执行
当hooks中的状态发生改变时，组件会重新渲染

export default function useChangeMode() {
  let [change, setChange] = useState(!!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;
  }

扩展应用场景

• 用户切换页面主题，比如黑夜/白天模式