示例代码目录 /example
一个全局挂载的vue实例,可以全局访问,分两个版本,默认版本是纯事件hub版本,另一个是带数据管理功能的版本
覆写的API为以下:
on
off
watch
扩展API
setData
getData
delData
因为VueEventHub是全项目共用vue实例,所以覆写了on off实例方法,并提供了setData getData delData实例方法,这些方法对事件和数据操作进行了检查校验,并提供了相应的提示。
因为hot热更新也会触发这个插件实例方法的错误警告提示,为了不影响hot更新调试,使用console.warn,而没有使用throw。
本组件没有太复杂的东西,放心使用,如果有需求,可以fork修改。
修改了output方式,通过require或window方式使用,不需要加.default
/**
* @param event 如果值为假,则清除所有eventHub的所有事件
* @param callback 如果值为假,则清除event参数的对应事件的所有监听函数
*/
function off (event, callback)
npm i vue @panhezeng/vue-event-hub -S
import Vue from "vue";
import VueEventHub from "@panhezeng/vue-event-hub";
Vue.use(VueEventHub);
import Vue from "vue";
import VueEventHub from "@panhezeng/vue-event-hub/dist/vue-event-hub-store.min.js";
Vue.use(VueEventHub);
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
npm i @panhezeng/vue-event-hub -S
// auto install
import "@panhezeng/vue-event-hub";
or
<!--auto install-->
<script src="https://cdn.jsdelivr.net/npm/@panhezeng/vue-event-hub@latest/dist/vue-event-hub.min.js"></script>
console.log(Vue.eventHub);
<script>
const Event = {
AppSetUser: "AppSetUser"
};
export default {
name: "App",
data() {
return {
user: []
};
},
created() {
this.$eventHub.watch("user", (newVal, oldVal) => {
console.log(this.$eventHub.getData("user"), newVal, oldVal);
this.user.push(
newVal ? JSON.stringify(this.$eventHub.getData("user")) : "undefined"
);
});
this.$eventHub.on(Event.AppSetUser, this.setUser);
this.$eventHub.emit(Event.AppSetUser, { name: "phz1" });
setTimeout(() => {
this.$eventHub.delData("user");
// 这个事件已经监听不到了,因为setUser后off了
this.$eventHub.emit(Event.AppSetUser, { name: "phz2" });
}, 600);
},
methods: {
setUser(data) {
this.$eventHub.setData("user", data, true);
this.$eventHub.off(Event.AppSetUser, this.setUser);
}
}
};
</script>
# install dependencies
npm install
# 运行插件使用示例
npm run dev:example
# 编译插件
npm run build
# 发版
npm set registry https://registry.npmjs.org/ && npm set @panhezeng:registry https://registry.npmjs.org/ && npm version patch && npm publish --access public && npm set registry https://registry.npm.taobao.org/ && npm set @panhezeng:registry https://registry.npm.taobao.org/