use-wagmi

以太坊的 Vue Composition API

通过 vue-demi 支持 Vue 2.x

基于 wagmi

Features

🚀 用于处理钱包、ENS、合同、交易、签名等的可组合项
💼 适用于 MetaMask、WalletConnect、Coinbase Wallet 和 Injected 的内置钱包连接器
👟 缓存、请求重复数据删除、多重调用、批处理和持久化
🌀 自动刷新钱包、区块和网络变化的数据
🦄 TypeScript

...还有更多

Documentation

use-wagmi 文档 请访问 wagmi 文档，因为大多数概念和 API 都是相同的

Installation

安装 use-wagmi 以及 viem

npm install use-wagmi viem

Quick Start

在 60 秒内连接钱包。

import { UseWagmiPlugin, createConfig, mainnet } from 'use-wagmi'
import { createPublicClient, http } from 'viem'
import App from './App.vue'

const config = createConfig({
  autoConnect: true,
  publicClient: createPublicClient({
    chain: mainnet,
    transport: http(),
  }),
})

const app = createApp(App);
app.use(UseWagmiPlugin, config);
app.mount('#app');

<script setup>
import { useAccount, useConnect, useDisconnect } from 'use-wagmi'
import { InjectedConnector } from 'use-wagmi/connectors/injected'

const { address, isConnected } = useAccount()
const { connect } = useConnect({
  connector: new InjectedConnector(),
})
const { disconnect } = useDisconnect()
</script>

<template>
  <div v-if="isConnected">
    Connected to {{ address }}
    <button @click="disconnect">Disconnect</button>
  </div>
  <button v-else @click="connect">
    Connect Wallet
  </button>
</template>

在此示例中，我们创建一个use-wagmi并将其传递给 Vue 插件。客户端设置为使用以太坊默认提供程序并自动连接到之前连接的钱包。

接下来，我们使用useConnect可组合项将注入的钱包（例如 MetaMask）连接到应用程序。最后，我们用来显示已连接帐户的地址useAccount，并允许他们用来断开连接useDisconnect。

我们只是简单介绍了 use-wagmi 的功能！

Nuxt

我们提供了一个 Nuxt 模块来启用 Nuxt 3 和 Nuxt Bridge 的自动导入。

npm install @use-wagmi/nuxt -D

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
  ],
})

然后在 Nuxt 应用程序中的任何位置使用 use-wagmi 函数。例如：

<script setup lang="ts">
const { address } = useAccount()
</script>

<template>
  <div>{{ address }}</div>
</template>

use-wagmi - Vue Web3 开发者的福音