The advantage over a third-party event-Center or using a Vue instance as the event center is that you avoid the mental burden of manually removing event listening

new Vuex.Store({
    state: {
        /** * false eventcenter * Commit ('bus', [eventName,...params]) * event listener watch('$store.state.bus', ([eventName, ..params])=>{}) */
        bus: []},mutations: {
        bus(s, event){ s.bus = event; }},})// Component foo, dispatcher
$store.commit("bus"["list-change", row]); . $store.commit("bus"["list-remove", row]);

// component bar, listener
$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); }}})Copy the code

Append content to mimic on/ EMIT mode

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]); }})Copy the code