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

前情提要

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;
  }

扩展应用场景

  • 用户切换页面主题,比如黑夜/白天模式
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.自定义一个全局变量js文件,命名为g_data 6到18行是监听回调,不用的话就不写 2.在main.js中通...
    唐艺德阅读 3,746评论 0 0
  • 作品名称:利用全局变量实现跨页面传值 作品编号:Case003 软件版本:Axure9 作品类型:交互案例 在我们...
    DaisyAxure阅读 934评论 0 4
  • 一、概念介绍 Vue.js和React.js分别是目前国内和国外最火的前端框架,框架跟类库/插件不同,框架是一套完...
    刘远舟阅读 1,096评论 0 0
  • 1.您有没有遇到这种情况? 在页面切换时,某一界面导航的状态没有保持。比如:你当前点击的状态: 你想在页面之间切换...
    wfaceboss阅读 2,264评论 0 2
  • Vue是一款高度封装的、开箱即用的、一栈式的前端框架,既可以结合webpack进行编译式前端开发,也适用基于gul...
    Hebborn_hb阅读 1,114评论 0 31