vue--------eventBus使用

实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

main.js:

import globalBus from '@/components/globalBus/index.js';
// 全局的eventBus
Vue.prototype.globalBus = globalBus;

新建globalBus/index.js:

/**
 * @namespace  global
 *  全局事件命名规则必须是 global+moduleName +  children moduleName
 *
 * 存在globalEventBus的数据，命名必须 以  common 开头，代表通用。
 *
 */
import Vue from 'vue';
// 全局的请求模块【只写请求】
import request from './request/request.js';
// 分模块
import module1 from './extend/module1.js';
// 全局的eventBus
const globalBus = new Vue({
    mixins: [
        // 全局的请求模块
        request,
        // 模块1
        module1
    ],
    data() {
        return {
            // 通用用户信息
            commonUserInfo: {userId: ''}
        };
    },
    created() {
        // 初始化globalBus 模块
        this.init();
    },
    beforeDestroy() {
        this.unbindGlobalEvent();
    },
    methods: {
        // 初始化globalBus 模块
        init() {
            // 绑定全局事件
            this.bindGlobalEvent();
            // 获取模块1中数据
            this.module1Init();
        },
        // 绑定全局事件
        bindGlobalEvent() {
            // 绑定模块1中的全局事件
            this.module1BindGlobalEvent();
            // 绑定通用数据的事件
            this.commonBindGlobalEvent();
        },
        // 取消全局事件
        unbindGlobalEvent() {
            // 取消绑定草稿箱全局事件
            this.module1UnbindGlobalEvent();
            // 取消绑定通用数据的事件
            this.commonUnbindGlobalEvent();
        },
        // 设置信息
        commonSetUserInfo(commonUserInfo) {
            this.commonUserInfo = commonUserInfo;
        },
        // 绑定通用数据的事件
        commonBindGlobalEvent() {
            this.$on('global-common-userInfo', this.commonSetUserInfo);
        },
        // 取消绑定通用数据的事件
        commonUnbindGlobalEvent() {
            this.$off('global-common-userInfo', this.commonSetUserInfo);
        }
    }

});
export default globalBus;

extend/module1.js:

/**
 * @namespace  module1 命名空间
 */
export default {
    data() {
        return {
            // module1【方便扩展，只需要更改命名空间】
            module1: {
                total: 0,
                // 数据列表
                dataList: [],
                // 请求参数
                query: {
                    // 当前页
                    pageNum: 1,
                    pageSize: 6
                }
            }
        };
    },
    methods: {
        // 初始化
        module1Init() {
            // 初始化列表
            this.module1InitDatalist();
        },
        // 初始化列表
        module1InitDatalist() {
            return new Promise((resolve, reject) => {
                // 页码重置1
                this.module1.query.pageNum = 1;
                // 获取数据
                this.requestModule1List()
                    .then((data) => {
                        // 为了减少代码量
                        const _module1 = this.module1;
                        // 总数
                        _module1.total = data.total;
                        // 列表
                        _module1.dataList = data.notes;
                        resolve('成功');
                    }, (data) => {
                        window.console.error('获取数据失败');
                        reject(data);
                    });
            });
        },
        // 添加module1列表数据条目
        module1AddDataItem(item) {
            this.module1.dataList.push(item);
        },
        // 删除列表数据条目
        module1DeleteDataItem(index, count = 1) {
            this.module1.dataList.splice(index, count);
        },
        // 绑定全局事件
        module1BindGlobalEvent() {
            // 绑定全局事件给module1添加数据条目
            this.$on('global-module1-addDataItem', this.module1AddDataItem);
        },
        // 取消全局事件
        module1UnbindGlobalEvent() {
            // 取消绑定全局事件给module1添加数据条目
            this.$off('global-module1-addDataItem', this.module1AddDataItem);
        },
        // 获取数据列表
        module1LoadDatalist() {
            return new Promise((resolve, reject) => {
                // 加载数据，永远需要将页码+1
                this.module1.query.pageNum++;
                // 获取数据
                this.requestModule1List()
                    .then((data) => {
                        const _module = this.module1;
                        // 草稿箱列表
                        _module1.dataList = _module1.dataList.concat(data.notes);
                        resolve('成功');
                    }, (data) => {
                        window.console.error('获取数据失败');
                        reject(data);
                    });
            });
        }
    }

};

在别的文件中可以使用globalBus中定义的数据：

computed: {
	module1List() {
		return this.globalBus.module1.dataList;
		}
}

也可以使用方法：

this.global.module1InitDatalist();