如何在Vue中通过WalletConnect Wagmi包获取连接钱包地址？

要获取连接后的钱包地址，直接使用Wagmi官方提供的useAccount钩子即可，这是获取当前账户信息的标准方式，具体实现步骤如下：

1. 导入useAccount钩子 #

在你的<script setup>代码块中添加导入语句：

import { useAccount } from 'wagmi'

2. 获取并使用账户信息 #

调用useAccount解构出核心属性，比如address（钱包地址）、isConnected（连接状态），之后可以在模板中展示地址，或者在业务逻辑中直接使用这个地址。

修改后的完整代码示例：

<template>
  <div>
    <w3m-button size="sm" label="Wallet" balance="show" />
    <!-- 模板中展示钱包地址 -->
    <div v-if="isConnected">
      已连接地址: {{ address }}
    </div>
    <div v-else>
      请连接钱包
    </div>
  </div>
</template>

<script setup>
import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi'
import { mainnet, sepolia } from 'viem/chains'
import { reconnect } from '@wagmi/core'
// 导入useAccount钩子
import { useAccount } from 'wagmi'

const projectId = import.meta.env.VITE_PROJECT_ID

const metadata = {
  name: 'Web3Modal',
  description: 'Web3Modal Example',
  url: 'https://web3modal.com',
  icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const chains = [mainnet, sepolia]

const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  enableWalletConnect: true,
  enableInjected: true,
  enableEIP6963: true,
  enableCoinbase: true
})

reconnect(config)

createWeb3Modal({
  wagmiConfig: config,
  projectId,
  enableAnalytics: true
})

// 获取账户核心信息
const { address, isConnected } = useAccount()
</script>

额外说明 #

• useAccount会自动监听钱包连接状态的变化，用户连接/断开钱包时，address和isConnected会实时更新
• 如果需要在逻辑中处理地址变化，可以配合Vue的watch监听状态：

import { watch } from 'vue'

watch(isConnected, (newStatus) => {
  if (newStatus) {
    console.log('钱包已连接，地址:', address.value)
    // 执行连接后的业务逻辑
  } else {
    console.log('钱包已断开')
  }
})

内容的提问来源于stack exchange，提问作者godisgay