{"id":19848122,"url":"https://github.com/shunnnet/vue-use-hook","last_synced_at":"2025-07-26T01:13:43.832Z","repository":{"id":57104304,"uuid":"443577072","full_name":"shunnNet/vue-use-hook","owner":"shunnNet","description":"vue-use-hook use event to manage your module's change","archived":false,"fork":false,"pushed_at":"2022-01-02T06:56:44.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T17:11:14.972Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shunnNet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-01T16:26:03.000Z","updated_at":"2022-01-02T06:56:47.000Z","dependencies_parsed_at":"2022-08-20T21:40:08.295Z","dependency_job_id":null,"html_url":"https://github.com/shunnNet/vue-use-hook","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fvue-use-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fvue-use-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fvue-use-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fvue-use-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shunnNet","download_url":"https://codeload.github.com/shunnNet/vue-use-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241226812,"owners_count":19930487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T13:16:12.879Z","updated_at":"2025-02-28T20:29:20.940Z","avatar_url":"https://github.com/shunnNet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @crazydos/vue-use-hook\nuse event to manage your modules \u0026 components state\n\n## Why\nThere are situations that I need reset or change a lots of state of modules and components, or make some action, for user's input. How do you manage these changes ? I see someone put all these changes in one modules function, I can't understand each module or component in what state in \"the time\". I want to know each modules / components change in any time, or like I said , event.\nThis module try to help someone who want know all changes in any time of a module or component.\n\nMaybe, it's just a EventBus.\n\n## Install\n\n`npm install @crazydos/vue-use-hook`\n\n## Usage\n\nFirst, you must declare hook you want to use in your application.\n\n```javascript\n// main.js\nimport {hook} from \"@crazydos/vue-use-hook\"\n\nhook.declareHook([\n  \"userChooseItem\",\n  \"userUnChooseItem\"\n])\n\nhook.log = process.env.NODE_ENV !== \"production\"\n// optionally open logger for debugging\n\n```\n\nAnd you can use hook in your application\n\n```vue\n\u003cscript\u003e\n// itemCounter.vue\nimport { useHook } from \"@crazydos/vue-use-hook\"\nexport default {\n  name: \"itemCounter\",\n  setup(){\n    const itemCount = ref(0)\n    useHook({\n      // event regist here, and auto unregist when onBeforeUnmount\n      userChooseItem(val){\n        itemCount.value += val // 1\n      },\n      userUnChooseItem(val){\n        itemCount.value -= 1\n      }\n    })\n  }\n}\n\u003c/script\u003e\n\n\u003c!-- itemPicker.vue --\u003e\n\u003cscript\u003e\nimport { useTrigger } from \"@crazydos/vue-use-hook\"\nexport default {\n  name: \"itemPicker\",\n  setup(){\n    const { userChooseItem, userUnChooseItem } = useTrigger({\n      userChooseItem(val){\n        return val\n      },\n      userUnChooseItem: true,\n    })\n\n    return {\n      userChooseItem, \n      userUnChooseItem\n    }\n  }\n}\n\u003c/script\u003e\n\u003ctemplate\u003e\n  \u003cbutton @click=\"userChooseItem(1)\"\u003epick\u003c/button\u003e\n  \u003cbutton @click=\"userUnChooseItem\"\u003edrop\u003c/button\u003e\n\u003c/template\u003e\n```\n\neven more, (like event bus) you can listen event outside component, like some little store\n\n```javascript\nimport { registHook } from \"@crazydos/vue-use-hook\"\nimport { ref } from \"vue\"\n\nconst itemCount = ref(0)\n\nregistHook({\n  userChooseItem(val){\n    itemCount.value += val\n  },\n  userDropAllItem(){\n    itemCount.value = 0\n  }\n}, \"itemCounter\")\n\n// second parameter name : \"itemCounter\" is required for unregisteration \n\n```\n\nManage state with timeline.\n\n## Documentation\n...coming soon","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshunnnet%2Fvue-use-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshunnnet%2Fvue-use-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshunnnet%2Fvue-use-hook/lists"}