Vue3.x 中eventBus -- mitt用法

本文主要记录了Vue3中eventBus – mitt的安装、封装、用法以及核心原理。

Vue3.x中移除了$on 、$off等自带的自定义事件相关方法，因此在vue3中推荐我们使用mitt事件总线传递数据，其实mitt的使用方式和vue原本的自定义事件使用方式相同。

Mitt

Mitt是一个体积极小的第三方消息发布/订阅式JavaScript库，React、Vue均可以使用。

安装mitt库

在项目的根目录下终端执行：

    npm install --save mitt
1

在组件中使用

安装好mitt后，直接引入mitt实例化后即可使用mitt；

    import mitt from 'mitt'
    
    const emitter = mitt()

    emitter.on('foo', e => console.log(e) )  //emitter
   
    emitter.emit('foo', 'emitter')
1
2
3
4
5
6
7

封装mitt

在utils目录下，新建 mitt.js 文件，写入下面代码进行封装；

    import mitt from 'mitt'

    const emitter =new mitt()

    export default emitter
1
2
3
4
5

在使用中直接引入emitter使用即可；

    import emitter from '../api/mitt'

    emitter.on('foo', e => console.log(e) )  //emitter

    emitter.emit('foo', 'emitter')
1
2
3
4
5

mitt用法

引入封装好的mitt即可直接使用mitt，但需要注意：注册事件最好在钩子onMounted中进行，并且注册的事件需要在onUnmounted钩子中移除。

    // 引入 mitt
    import emitter from '../api/mitt'

    // 注册
    emitter.on('eventName', function(e) {
        console.log(e)
    })

    // 调用
    emitter.emit('eventName', 'emitter')

    // 移除
    emitter.off('eventName')
1
2
3
4
5
6
7
8
9
10
11
12
13

控制台输出： emitter

ps: 注册事件和调用事件的两个组件，不需要是父子组件，兄弟组件以及其他组件均可。

mitt核心原理

mitt的核心原理，就是通过 map 的方法保存函数。

export default function mitt(all) {
    all = all || new Map();
    return {
        all,
        // 注册
        on(type, handler) {
            const handlers = all.get(type);
            const added = handlers && handlers.push(handler);
            if (!added) {
                all.set(type, [handler]);
            }
        },
        //调用
        emit(type, evt) {
            ((all.get(type) || [])).slice().map((handler) => { handler(evt); });
            ((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
        },
        //移除
        off(type, handler) {
            const handlers = all.get(type);
            if (handlers) {
                handlers.splice(handlers.indexOf(handler) >>> 0, 1);
            }
        },
    };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！