https://github.com/shunnnet/vue-use-hook
vue-use-hook use event to manage your module's change
https://github.com/shunnnet/vue-use-hook
Last synced: 11 months ago
JSON representation
vue-use-hook use event to manage your module's change
- Host: GitHub
- URL: https://github.com/shunnnet/vue-use-hook
- Owner: shunnNet
- License: mit
- Created: 2022-01-01T16:26:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-02T06:56:44.000Z (over 4 years ago)
- Last Synced: 2025-02-15T17:11:14.972Z (over 1 year ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @crazydos/vue-use-hook
use event to manage your modules & components state
## Why
There 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.
This module try to help someone who want know all changes in any time of a module or component.
Maybe, it's just a EventBus.
## Install
`npm install @crazydos/vue-use-hook`
## Usage
First, you must declare hook you want to use in your application.
```javascript
// main.js
import {hook} from "@crazydos/vue-use-hook"
hook.declareHook([
"userChooseItem",
"userUnChooseItem"
])
hook.log = process.env.NODE_ENV !== "production"
// optionally open logger for debugging
```
And you can use hook in your application
```vue
// itemCounter.vue
import { useHook } from "@crazydos/vue-use-hook"
export default {
name: "itemCounter",
setup(){
const itemCount = ref(0)
useHook({
// event regist here, and auto unregist when onBeforeUnmount
userChooseItem(val){
itemCount.value += val // 1
},
userUnChooseItem(val){
itemCount.value -= 1
}
})
}
}
import { useTrigger } from "@crazydos/vue-use-hook"
export default {
name: "itemPicker",
setup(){
const { userChooseItem, userUnChooseItem } = useTrigger({
userChooseItem(val){
return val
},
userUnChooseItem: true,
})
return {
userChooseItem,
userUnChooseItem
}
}
}
pick
drop
```
even more, (like event bus) you can listen event outside component, like some little store
```javascript
import { registHook } from "@crazydos/vue-use-hook"
import { ref } from "vue"
const itemCount = ref(0)
registHook({
userChooseItem(val){
itemCount.value += val
},
userDropAllItem(){
itemCount.value = 0
}
}, "itemCounter")
// second parameter name : "itemCounter" is required for unregisteration
```
Manage state with timeline.
## Documentation
...coming soon