vue async mixin bug All In One

vue async mixin bug All In One

mixin & async

bug

// monitor mixins
import {
    monitorEventMixin,
} from '@/mixins/monitor/event-mixin.js';

export default {
    mixins: [monitorEventMixin],
    async mounted () {
        // 初始化 ❌
        console.log(1);
        this.getUserInfo();
        await this.getCommConfig();
        console.log(2);
        this.redirectUrl();
    },
    methods: {
       //...
    }
}

OK

import ToolsEventService from '@/services/tools/eventService';

// monitor mixins
// import {
//     monitorEventMixin,
// } from '@/mixins/monitor/event-mixin.js';

export default {
    // mixins: [monitorEventMixin],
    async mounted () {
        // 初始化 ✅
        console.log('event init', 0);
        await this.initMonitorEventDict();
        console.log(1);
        this.getUserInfo();
        await this.getCommConfig();
        console.log(2);
        this.redirectUrl();
    },
    methods: {
        async initMonitorEventDict () {
            await this.initEventSelectDict();
            await this.initEventReturnDict();
        },
        async initEventSelectDict () {
            const res = await ToolsEventService.getEventDict();
            const eventDict = res?.data?.data ?? {};
            if(eventDict?.event_type) {
                UtilCache.setCacheWithChain('tools.eventDict', eventDict);
            }
            console.log('event 1 OK ✅');
        },
        async initEventReturnDict () {
            const res = await ToolsEventService.getEventWarnDict();
            const eventWarnList = res?.data?.data ?? [];
            if(eventWarnList.length) {
                UtilCache.setCacheWithChain('tools.eventWarnList', eventWarnList);
            }
            console.log('event 2 OK ✅');
        },
    }
}

mixin

import UtilCache from '@/utils/cache';
import ToolsEventService from '@/services/tools/eventService';

const monitorEventMixin = {
    // async created () {
    //     console.log('event mixin init 🔥');
    //     await this.initMonitorEventDict();
    // },
    // created () {
    //     console.log('event mixin init 🔥');
    //     this.initMonitorEventDict();
    // },
    async mounted ()  {
        console.log('event mixin init 🔥');
        await this.initMonitorEventDict();
    },
    // mounted () {
    //     console.log('event mixin init 🔥');
    //     this.initMonitorEventDict();
    // },
    methods: {
        async initMonitorEventDict () {
            await this.initEventSelectDict();
            await this.initEventReturnDict();
        },
        async initEventSelectDict () {
            const res = await ToolsEventService.getEventDict();
            const eventDict = res?.data?.data ?? {};
            if(eventDict?.event_type) {
                UtilCache.setCacheWithChain('tools.eventDict', eventDict);
            }
            console.log('event mixin OK ✅ 1');
        },
        async initEventReturnDict () {
            const res = await ToolsEventService.getEventWarnDict();
            const eventWarnList = res?.data?.data ?? [];
            if(eventWarnList.length) {
                UtilCache.setCacheWithChain('tools.eventWarnList', eventWarnList);
            }
            console.log('event mixin OK ✅ 2');
        },
    },
};

export {
    monitorEventMixin,
};

export default monitorEventMixin;

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---