使用vuex实现观察者模式的规范

相对于第三方event-center或者使用Vue实例作为事件中心的好处在于, 可以避免手动移除事件监听的心智负担

new Vuex.Store({
    state: {
        /**
         * 假的事件中心
         * 事件发送 commit('bus', [eventName, ...params])
         * 事件监听 watch('$store.state.bus', ([eventName, ..params])=>{})
         */
        bus:[],
    },
    mutations: {
        bus(s, event) {
            s.bus = event;
        },
    },
})


//组件foo,派发者
$store.commit("bus", ["list-change", row]);
...
$store.commit("bus", ["list-remove", row]);

//组件bar,监听者
$watch("$store.state.bus", ([e, row])=>{
    if (e == "list-change") {
        fresh()
    }else if (e == "remove") {
        let index = ls.findIndex(el => row.id == el.id);
        if (index >= 0) {
            ls.splice(index, 1);
        }
    }
})

追加内容 高仿on/emit模式

import Vue from "vue";
Object.assets(Vue.proptotype, {
    on(event, handler) {
        const m = this;
        return m.$watch("$store.state.bus", function([_event, ...rest]){
            if (event == _event) {
                handler(...rest);
            }
        })
    },
    emit(event, ...rest) {
        const m = this;
        m.$store.commit("bus", [event, ...rest]);
    }
})