left-vue-hooks
v0.6.0
Published
vue hook
Readme
left-vue-hooks
项目TS重构已迁移到 https://www.npmjs.com/package/vx-hooks
vx-hook 的 @vue/composition-api 同步版本。 是对umi及其他 react hook 的 vue实现
Install
yarn add @vue/composition-api left-vue-hooks
or
npm i --save @vue/composition-api left-vue-hooks当前vue 版本为2.x.x, 需要依赖 @vue/composition-api
Usage
引入 @vue/composition-api
// main.js
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);
组件内使用
<template>
<div class="home">
<div>
<Card style='margin: 20% auto; width: 600px' title=''>
<h2> {{ state.name }} </h2>
<div> default: {{ state.age }} </div>
<div> throttle: {{ info }} </div>
<Button @click='add' > add </Button>
</Card>
</div>
</div>
</template>
<script>
import { reactive } from '@vue/composition-api'
import { useThrottle } from 'left-vue-hooks'
export default {
setup(){
const state = reactive({name: 'jeck', age: 23})
const add = () => state.age += 1
const [ info ] = useThrottle(() => state.age, 1000) // 防抖hook
return {
add,
state,
info,
}
}
}
</script>