最近刷到一个很强的库hy-event-store 刷了遍里面的源码 逻辑性和设计性非常强 后面有时间会针对它写一份博客 下面是该库的常用使用方法(可以在vue、react、小程序中使用) (该库的github中使用文档没有写全，故而写这一篇博客)
const {
HYEventStore
} = require("hy-event-store")
const axios = require("axios")
const eventStore = new HYEventStore({
// 存放共享的数据
state: {
name: "蓝海",
banners: [],
recommends: []
},
// 在这里可以发起网络请求
actions: {
// ctx => state对象 可以直接(ctx.name = “新名字”) 来进行修改数据，在这里的this是当前new出来的实例对象
fetchData(ctx) {
// 发送请求
axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
const {
banner,
recommend
} = res.data.data
// 赋值
ctx.banners = banner
ctx.recommends = recommend
})
}
}
})
const fn = (value) => {
console.log("监听name:", value)
}
// 单个数据监听
eventStore.onState("name", fn)
// 多个数据监听
eventStore.onStates(["name", "banners", "recommends"], (value) => {
// 注意：如果当前name发生了改变 但是banners和recommends没有发生改变 那么banners和recommends会返回undefined
console.log("监听多个:name:", value.name)
console.log("监听多个:banners:", value.banners)
console.log("监听多个:recommends:", value.recommends)
})
// 执行发起请求
eventStore.dispatch("fetchData")
setTimeout(() => {
// 手动修改共享数据
eventStore.setState("name", "新名字")
// 注销监听 当当前页面进行销毁时需要把当前页面中的数据监听进行销毁
eventStore.offState("name", fn)
// eventStore.offStates
}, 3000)
