Vueuse Components
用于 Vue3 组件库的 vueuse。
快速开始
Step 1: 安装vueuse-components：
yarn add vueuse-components
Step 2: 单独引入usePage，在App.vue中编写以下代码：
import { usePage } from 'vueuse-components'
Step 3: 使用usePage，在App.vue中编写以下代码：
<script setup lang="ts">
import { usePage } from 'vueuse-components'
// 新增
const { pageIndex, prevPage, nextPage } = usePage(1)
</script>
<template>
<div>
<button @click="prevPage">上一页</button>
{{ pageIndex }}
<button @click="nextPage">下一页</button>
</div>
</template>除了局部使用Composable，还可以全局注册vueuse-components插件。
引入vueuse-components插件，在main.ts中编写以下代码：
import useComponents from 'vueuse-components'
app.use(useComponents).mount('#app')
在App.vue中编写以下代码：
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const { usePage } = getCurrentInstance().appContext.config.globalProperties.useComponents
const { pageIndex, prevPage, nextPage } = usePage(1)
</script>
<template>
<div>
<button @click="prevPage">上一页</button>
{{ pageIndex }}
<button @click="nextPage">下一页</button>
</div>
</template>