基于MobX 封装 Action 接口 Loading #85

简介: 基于MobX 封装 Action 接口 Loading #85

代码如下


import { action, observable } from 'mobx';
export default class BasicStore {
    @observable isLoading  = observable.map({ });
    @action
    changeLoadingStatus (loadingType, type) {
        this.isLoading.set(loadingType, type);
    }
}
// 初始化loading
export function initLoading(target, key, descriptor) {
    const oldValue = descriptor.value;
    descriptor.value = async function(...args) {
        this.changeLoadingStatus(key, true);
        let res;
        try {
            res = await oldValue.apply(this, args);
        } catch (error) {
            // 做一些错误上报之类的处理 
            throw error;
        } finally {
            this.changeLoadingStatus(key, false);
        }
        return res;
    };
    return descriptor;
}
目录
相关文章
|
3月前
|
JavaScript 前端开发 API
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
|
2月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
61 0
|
3月前
|
JavaScript
Redux 中定义 Action
【8月更文挑战第30天】
57 0
Vue-Cli的生命周期写法,methods要与data()平级,生命周期函数要与methods平级
Vue-Cli的生命周期写法,methods要与data()平级,生命周期函数要与methods平级
|
6月前
封装组件,通过指令进行调用,类似于elementUI中的loading组件
封装组件,通过指令进行调用,类似于elementUI中的loading组件
48 0
|
6月前
|
JavaScript
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
element-ui的upload组件的clearFiles方法的调用
element-ui的upload组件的clearFiles方法的调用
485 0
|
JavaScript API
vue封装调用接口
vue封装调用接口
88 0
|
前端开发
react学习案例14-store,action,reducer
react学习案例14-store,action,reducer
50 0
react学习案例14-store,action,reducer
antd组件库封装9-interface初探
antd组件库封装9-interface初探
71 0
antd组件库封装9-interface初探