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() }

      

      

      

  • 相关阅读:
    【URAL1039】Anniversary Party
    【POJ2480】Longge's problem
    【POJ2478】Farey Sequence
    【HDU2157】How many ways??
    【NOI2012】随机数生成器
    【HDU3306】Another kind of Fibonacci
    【HDU2604】Queuing
    【HDU1757】A Simple Math Problem
    【HDU1575】Tr A
    【HDU1521】排列组合
  • 原文地址:https://www.cnblogs.com/caoke/p/10957570.html
Copyright © 2011-2022 走看看