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>