zoukankan      html  css  js  c++  java
  • 喷喷redux、vuex这些状态管理库

    api太恶心、api太恶心、api太恶心 

    什么是Redux它为什么存在 : https://www.jianshu.com/p/d6614feef303

    Redux、vuex是可以帮你处理应用的共享状态,但是感觉它的api太恶心,开发、维护的时间成本太高。

    推荐用另外种状态管理方式,别再用vuex或redux库去做管理了。

    1、Bus事件通信

    2、借助中间文件,充当中央仓库

    ES6 的模块机制天然就支持建立一个中央仓库, 当 A 文件使用 import value from './b.js' 来引用 B 文件里面的 value 的时候, 这时就会赋值给 A 文件一个 B 文件的 value 的 只读引用, 当 B 文件里面的 value 的值发生变化的时候, A 文件里面的 value 也会跟着改变。

    约定一个状态共享的文件夹:states。里面新建文件

    /*
    * 文件名:app.js
    * 用于全局状态共享
    * */
    
    export const states={
        //用户信息
        _userInfo:null,
        getUserInfo:async function(){
            if(!this._userInfo){
                this._userInfo=await fetch('/userInfo');
            }
            return this._userInfo;
        },
        //app信息
        _appInfo:null,
        getAppInfo:async function(){
            if(!this._appInfo){
                this._appInfo=await fetch('/appInfo');
            }
            return this._appInfo;
        }
    }

      

    那个组件需要共享状态,就引入共享文件,在组件生命周期created(vue)或者componentwillmount(react),执行const userInfo=await states.getUserInfo();

    /*
    * 文件名:home.js
    * 首页或其他页面
    * */
    import states from './states/states.js';
    
    //vue.js
    created:async function(){
        const userInfo=await states.getUserInfo()
    }
    //react.js componentwillmount:async function(){ const userInfo=await states.getUserInfo() }

      

      

      

  • 相关阅读:
    Python爬虫一
    Python爬虫二
    DRF框架中的演变View
    计算时间复杂度例题
    vue2.x webpack打包资源路径问题
    vs code运行c语言 控制台乱码 问题
    解决视频的声音和画面不同步问题
    c语言数据结构,静态链表,结构体数组
    swagger @ApiModel添加实体类不生效
    计算及校验海明码的3个举例
  • 原文地址:https://www.cnblogs.com/caoke/p/10957570.html
Copyright © 2011-2022 走看看