npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-unicom

v2.3.1

Published

vue-unicom

Downloads

9

Readme

vue-unicom

  • 它是 Vuejs 的一个插件,解决了 Vue 中非父子组件通讯的痛点。
  • 它还可以使用在任意 JS 中,作为和 Vue 组件通讯的纽带
  • 利用订阅者和发布者模式来管理消息

更新日志

  • [2019-07-30]重构 vue-unicom,重构后代码逻辑更清晰
  • [2019-07-31]优化注解,修复全局订阅问题以及一些多余代码删除
  • TS改造移动到 rimjs实现
  • [2021-04-28]支持vue3,不支持直接全局引入

功能

  • 任意相对独立的 JS 之间的通讯(包括 Vue 组件以及 JS)
  • 订阅需要初始化客户端,并且有自身的生命周期
  • 当在 Vue 组件内,unicom 会自动注册,并将生命周期融合
  • 全局监控支持(当监控到某个组件初始化后,会自动触发回调)

运行 demo

  • vue-cli demo: https://github.com/szpoppy/vue-unicom-demo

获取 vue-unicom

  • npm i vue-unicom -S

API

JS 中使用

import Unicom from "vue-unicom"
let unicom = new Unicom({
    // 绑定的对象
    target: {},
    // 实例唯一ID
    id: "id",
    // 实例分组,可以多个 字符串数组表示
    group:"group"
})

// 消息订阅
unicom.on("instruct", function({
    // emit时,第二个参数
    data,
    $1,
    // emit时,第三个参数,依次类推
    $2,
    // 触发emit的实例
    from,
    // new 时,绑定的对象
    target
}) {
    // ...
})

// 取消订阅 instruct 并且 回调为 这个函数的
unicom.off("instruct", fun)
// 取消 instruct 的全部订阅
unicom.off("instruct")
// 取消全部和unicom有关的订阅
unicom.off()

// 消息发布 返回event 同 上面的回调参数
let event = unicom.emit('instruct', arg1, arg2, ...)

// 消息发布到指定id
let event = unicom.emit('instruct#id', arg1, arg2, ...)

// 消息发布到指定group
let event = unicom.emit('instruct@group', arg1, arg2, ...)

// 获取命名为 id 的unicom
let that = unicom.emit('#id')

// 获取分组 group
let thats = unicom.emit('@group')

// 监控组件被命名为 id
unicom.monitor("#id", function(that){
    // that 命名为 id 的那个组件
    // ...
})
// 监控组件分组中包含 group
unicom.monitor("@group", function(that) {
    // ...
})

// 取消特定监控
unicom.monitorOff("#id", fun)
unicom.monitorOff("@group", fun)

// 取消指定所有监控
unicom.monitorOff("#id")
unicom.monitorOff("@group")

// 取消全部和unicom有关的监控
unicom.monitorOff()

main.js 注册 Unicom 插件

import Vue from 'vue'
import VueUnicom from 'vue-unicom'
Vue.use(VueUnicom, {
    // 默认为true,有时全局加入props参数会导致异常,比如 ant-design
    useProps: false,
    // 制定名称, 默认为 unicom
    name: 'unicom',
    // 定制分组使用名称 默认为 unicom + 'Name'
    unicomName: 'unicomName',
    // 定制id使用名称 默认为 unicom + 'Id'
    unicomId: 'unicomId',
    // 定制vue中,发布emit方法, this['$' + unicomEmit] 默认为 unicom参数
    unicomEmit: 'unicom',
    // 定制 Vue中,全局访问的类名 默认为  unicom 参数,并将第一个字母大写
    unicomClass: 'Unicom'
})

其他关联 JS 中使用

// 提供 main.js 安装的插件
export default function install(Vue) {
    // 通过 Vue.Unicom 获取类
    let unicom = new Vue.Unicom()

    // 其他操作 参照 JS中使用方案
}

Vue 组件内部使用

{
    // 将这个组件归到group分组, 多个分组请使用字符串数组
    unicomName: 'group',
    // unicom 是组件内部订阅消息设置的
    unicom: {
        // 订阅消息 为 instruct
        instruct (event) {
            // event 参数参照上面《JS中使用》中的on方法回调参数
        }
    },
    method: {
        doExec () {
            // 发布订阅消息
            // instruct 本组件如果订阅,也能收到
            this.$unicom("instruct", arg1, arg2, ...)

            // 获取被命名为 id的组件引用
            // that 为unicom实例,that.target 为Vue的实例
            let that = this.$unicom("#id")

            // 获取分组为 group 的所有vue
            let thats = this.$unicom("@group")

            // 原始 unicom 对象的指向,不介意直接操作
            this._unicom_data_.self
        }
    }
}

Vue 组件实例化传参

<!-- 加入group分组 并且 将本组件命名为 id -->
<component unicom-name="group" unicom-id="id"></component>
<!-- 加入多个分组,请传入数组 -->
<component :unicom-name="['group1', 'group2']"></component>