在 Vue.js 应用中集成 MetaMask 并获取用户的 Ethereum 钱包地址。
需要使用 Web3.js 或者 ethers.js 库来与 MetaMask 交互。以下是使用 Web3.js 和 MetaMask 在 Vue.js 中获取用户钱包地址的基本步骤。
1. 安装 Web3.js
如果你还没有安装 Web3.js，可以通过 npm 或 yarn 来安装它：
npm install web3
# 或者
yarn add web3
2. 初始化 Web3 实例
你需要初始化一个 Web3 实例，并将其提供商设置为 MetaMask 提供的以太坊注入对象（window.ethereum）。
3. 请求访问账户
在用户同意后，你可以请求访问他们的 MetaMask 账户。
示例代码
下面是一个简单的 Vue.js 组件示例，展示了如何初始化 Web3 实例并请求用户的钱包地址：
<template><div><button @click="connectWallet">Connect Wallet</button><p v-if="account">Connected with account: {{ account }}</p></div>
</template><script>
import Web3 from 'web3';export default {data() {return {web3: null,account: null};},methods: {async connectWallet() {if (window.ethereum) {this.web3 = new Web3(window.ethereum);try {// 请求访问账户const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });this.account = accounts[0];console.log('Connected with account:', this.account);} catch (error) {console.error('User denied account access...');}} else {alert('MetaMask is not installed!');}}}
};
</script>
关键点
检查 MetaMask 是否已安装：通过检测 window.ethereum 是否存在来确认 MetaMask 已经安装。
初始化 Web3 实例：使用 window.ethereum 作为提供商创建 Web3 实例。
请求账户访问权限：使用 ethereum.request 方法请求用户授权访问他们的账户。
保存账户地址：将获取到的账户地址保存在组件的数据属性中。
注意事项
用户必须授权你的 dApp 访问他们的 MetaMask 账户，否则不会有任何账户被返回。
如果用户拒绝了请求，你需要处理相应的错误。
确保你的应用在支持 MetaMask 的环境中运行，比如 Chrome 浏览器。
以上就是如何在 Vue.js 应用中使用 Web3.js 与 MetaMask 交互并获取用户钱包地址的方法。
