wagmi/vue Chains 使用指南Vue 3 应用中引入与自定义以太坊链定义【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi本文围绕 wagmi/vue 的Chains能力展开说明如何通过wagmi/vue/chains入口点在 Vue 3 应用中导入 Viem 提供的全部链定义Chain 对象并结合仓库源码如 packages/vue/src/exports/chains.ts剖析其代理实现与典型用法同时给出基于 ViemChain类型自定义一条新链的完整实操帮助读者在 Wagmi Vue 应用中正确选链、配链与切链。什么是wagmi/vue/chainsWagmi Vue 不自行维护链数据而是直接复用 Viem 的Chain对象。wagmi/vue/chains是一个独立入口点entrypoint通过一行export * from viem/chains将 Viem 中定义的所有链原样代理导出见 packages/vue/src/exports/chains.ts。这意味着只要 Viem 新增了链定义wagmi/vue/chains会自动获得无需 Wagmi 单独发版同步你使用的链对象类型与 Viem 完全一致天然获得 TypeScript 的类型提示与约束自定义链时不必修改任何 Wagmi 源码直接基于 Viem 的Chain类型构建即可。在 packages/vue/package.json 的exports字段中./chains子路径被映射到dist/esm/exports/chains.js类型声明为dist/types/exports/chains.d.ts同时typesVersions也做了对应映射因此无论是 ESM 运行时代码还是 TS 类型解析都能正确命中该入口。导入方式从wagmi/vue/chains入口点导入代理了viem/chains的全部链import { mainnet } from wagmi/vue/chains这也是 Vue 3 项目中最推荐的导入写法与框架主包wagmi/vue含插件、Composables、类型等解耦仅按需加载链定义。可用链与依赖版本当前仓库根目录 package.json 中锁定的 Viem 版本为2.55.7因此本文介绍的链定义范围以该版本为准。viem/chains中内置了大量主流网络包括但不限于以太坊主网与测试网mainnet、sepolia、holesky、hardhat、localhost等主流 L2 与生态链optimism、arbitrum、base、polygon、bscBNB Chain、avalanche、linea、scroll、zksync等。由于链数据直接来自 Viem若需确认某个具体版本下可用链的完整清单应以当前安装的viem/chains模块导出为准。提示站点侧 site/vue/api/chains.md 使用SearchChains组件见 site/components/SearchChains.vue对viem/chains的全部导出做实时检索——该组件将每个链的导入名、链 ID、名称与原生货币符号汇总展示并支持按任意字段过滤。这说明以 Viem 链数据为准、Wagmi 仅做代理是整个文档体系的统一口径。在 Vue 3 项目中配置链导入链之后把它们传入createConfig的chains数组并为每条链指定 transport本示例使用http。以下代码来自仓库自带的 Vue playgroundplaygrounds/vite-vue/src/wagmi.ts。import { createConfig, createStorage, http } from wagmi/vue import { mainnet, optimism, sepolia } from wagmi/vue/chains import { baseAccount, metaMask, walletConnect } from wagmi/vue/connectors export const config createConfig({ chains: [mainnet, sepolia, optimism], connectors: [ walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID, }), baseAccount({ appName: Vite Vue Playground }), metaMask(), ], storage: createStorage({ storage: localStorage, key: vite-vue }), transports: { [mainnet.id]: http(), [sepolia.id]: http(), [optimism.id]: http(), }, })要点说明chains数组顺序数组中的第一项默认作为应用的初始链useChains()返回的链列表也遵循该顺序。transports键以chain.id为键配置 transport这是 Wagmi 约定俗成的写法保证链对象与其网络访问方式一一对应。mainnet.id与mainnet同名冲突这里mainnet是链对象[mainnet.id]是取链 ID1作为对象键两者含义不同但写法自然不会冲突。读取当前配置的链配置完成后可通过useChainsComposable 以响应式方式读取当前配置的链列表。其源码实现见 packages/vue/src/composables/useChains.ts内部调用getChains(config)初始化ref并通过watchChains订阅链配置变化在onScopeDispose时自动清理订阅最终返回只读的Ref。import { useChains } from wagmi/vue const chains useChains()对应的测试 packages/vue/src/composables/useChains.test.ts 验证了其响应式行为初始配置 3 条链时chains.value.length为 3当通过config._internal.chains.setState追加一条celo链后chains.value.length立即变为 4。自定义链从零定义一条网络Wagmi 官方文档site/vue/api/chains.md 内联的 create-chain 章节给出了两种自定义链的标准写法as const satisfies Chain或 Viem 的defineChain。两种方式都要求补齐必需的链属性TypeScript 会在缺失时给出类型错误指导你逐步完善。方式一as const satisfies Chainimport { type Chain } from viem export const mainnet { id: 1, name: Ethereum, nativeCurrency: { name: Ether, symbol: ETH, decimals: 18 }, rpcUrls: { default: { http: [https://eth.merkle.io] }, }, blockExplorers: { default: { name: Etherscan, url: https://etherscan.io }, }, contracts: { ensRegistry: { address: 0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e, }, ensUniversalResolver: { address: 0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da, blockCreated: 16773775, }, multicall3: { address: 0xca11bde05977b3631167028862be2a173976ca11, blockCreated: 14353601, }, }, } as const satisfies Chain方式二defineChainimport { defineChain } from viem export const mainnet defineChain({ id: 1, name: Ethereum, nativeCurrency: { name: Ether, symbol: ETH, decimals: 18 }, rpcUrls: { default: { http: [https://eth.merkle.io] }, }, blockExplorers: { default: { name: Etherscan, url: https://etherscan.io }, }, contracts: { ensRegistry: { address: 0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e, }, ensUniversalResolver: { address: 0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da, blockCreated: 16773775, }, multicall3: { address: 0xca11bde05977b3631167028862be2a173976ca11, blockCreated: 14353601, }, }, })两种写法效果等价as const satisfies Chain会让对象字面量获得精确的字面量类型并被Chain类型约束defineChain则通过函数参数校验并返回标准Chain对象。选择你习惯的一种即可。属性字段详解自定义链时添加的属性越多该链在 Wagmi 中使用体验越好。官方文档与社区链清单如ethereum-lists/chains数据集是获取这些信息的常用来源核心字段如下字段说明示例id网络的 Chain ID可在 ChainList 等站点按网络名查询如 Ethereum Mainnet 的 Chain ID 为11name人类可读的网络名称EthereumnativeCurrency网络原生货币含name、symbol、decimals三项{ name: Ether, symbol: ETH, decimals: 18 }rpcUrls至少一个公开、可信的 RPC URL通常放在default.http数组中[https://eth.merkle.io]blockExplorers区块浏览器集合至少提供default含name与url{ default: { name: Etherscan, url: https://etherscan.io } }contracts该链上已部署的合约地址可选见下{ multicall3: {...} }sourceId源链 ID例如 L2 对应的 L1 链 ID1testnet是否为测试网布尔值true关于contracts的补充说明contracts字段是可选但强烈建议的Wagmi 会在需要时自动使用这些合约例如批量读取时调用multicall3、ENS 相关操作使用ensRegistry/ensUniversalResolvermulticall3可选多合约聚合调用合约其地址绝大多数链上是0xca11bde05977b3631167028862be2a173976ca11部署区块号可在区块浏览器上查到示例中的14353601即以太坊主网部署区块。ensRegistry可选并非所有链都有 ENS Registry只有部署了 ENS 注册表的链才需要配置。ensUniversalResolver可选同样并非所有链都部署了 ENS Universal Resolver。若你自行部署这些合约请务必确保合约已在区块浏览器上完成验证否则依赖合约地址的调用可能失败。总结wagmi/vue/chains是viem/chains的零成本代理入口见 packages/vue/src/exports/chains.ts链数据完全由 Viem 提供并随 Viem 版本演进在 Vue 3 应用中通过import { mainnet } from wagmi/vue/chains导入内置链并在createConfig中组合chains与transports即可完成多链配置需要接入 Viem 未收录的网络时基于 Viem 的Chain类型或defineChain自定义链对象补齐id、name、nativeCurrency、rpcUrls、blockExplorers等核心字段并尽可能补充contracts尤其multicall3以提升 Wagmi 的聚合读与 ENS 能力链配置是响应式的useChains()会跟随配置变化自动更新packages/vue/src/composables/useChains.ts实测用例见 packages/vue/src/composables/useChains.test.ts。更多 Wagmi Vue 的入门与进阶内容可继续阅读 site/vue/getting-started.md、site/vue/api/createConfig.md 以及 site/vue/api/actions.md。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
@wagmi/vue Chains 使用指南：Vue 3 应用中引入与自定义以太坊链定义
wagmi/vue Chains 使用指南Vue 3 应用中引入与自定义以太坊链定义【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi本文围绕 wagmi/vue 的Chains能力展开说明如何通过wagmi/vue/chains入口点在 Vue 3 应用中导入 Viem 提供的全部链定义Chain 对象并结合仓库源码如 packages/vue/src/exports/chains.ts剖析其代理实现与典型用法同时给出基于 ViemChain类型自定义一条新链的完整实操帮助读者在 Wagmi Vue 应用中正确选链、配链与切链。什么是wagmi/vue/chainsWagmi Vue 不自行维护链数据而是直接复用 Viem 的Chain对象。wagmi/vue/chains是一个独立入口点entrypoint通过一行export * from viem/chains将 Viem 中定义的所有链原样代理导出见 packages/vue/src/exports/chains.ts。这意味着只要 Viem 新增了链定义wagmi/vue/chains会自动获得无需 Wagmi 单独发版同步你使用的链对象类型与 Viem 完全一致天然获得 TypeScript 的类型提示与约束自定义链时不必修改任何 Wagmi 源码直接基于 Viem 的Chain类型构建即可。在 packages/vue/package.json 的exports字段中./chains子路径被映射到dist/esm/exports/chains.js类型声明为dist/types/exports/chains.d.ts同时typesVersions也做了对应映射因此无论是 ESM 运行时代码还是 TS 类型解析都能正确命中该入口。导入方式从wagmi/vue/chains入口点导入代理了viem/chains的全部链import { mainnet } from wagmi/vue/chains这也是 Vue 3 项目中最推荐的导入写法与框架主包wagmi/vue含插件、Composables、类型等解耦仅按需加载链定义。可用链与依赖版本当前仓库根目录 package.json 中锁定的 Viem 版本为2.55.7因此本文介绍的链定义范围以该版本为准。viem/chains中内置了大量主流网络包括但不限于以太坊主网与测试网mainnet、sepolia、holesky、hardhat、localhost等主流 L2 与生态链optimism、arbitrum、base、polygon、bscBNB Chain、avalanche、linea、scroll、zksync等。由于链数据直接来自 Viem若需确认某个具体版本下可用链的完整清单应以当前安装的viem/chains模块导出为准。提示站点侧 site/vue/api/chains.md 使用SearchChains组件见 site/components/SearchChains.vue对viem/chains的全部导出做实时检索——该组件将每个链的导入名、链 ID、名称与原生货币符号汇总展示并支持按任意字段过滤。这说明以 Viem 链数据为准、Wagmi 仅做代理是整个文档体系的统一口径。在 Vue 3 项目中配置链导入链之后把它们传入createConfig的chains数组并为每条链指定 transport本示例使用http。以下代码来自仓库自带的 Vue playgroundplaygrounds/vite-vue/src/wagmi.ts。import { createConfig, createStorage, http } from wagmi/vue import { mainnet, optimism, sepolia } from wagmi/vue/chains import { baseAccount, metaMask, walletConnect } from wagmi/vue/connectors export const config createConfig({ chains: [mainnet, sepolia, optimism], connectors: [ walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID, }), baseAccount({ appName: Vite Vue Playground }), metaMask(), ], storage: createStorage({ storage: localStorage, key: vite-vue }), transports: { [mainnet.id]: http(), [sepolia.id]: http(), [optimism.id]: http(), }, })要点说明chains数组顺序数组中的第一项默认作为应用的初始链useChains()返回的链列表也遵循该顺序。transports键以chain.id为键配置 transport这是 Wagmi 约定俗成的写法保证链对象与其网络访问方式一一对应。mainnet.id与mainnet同名冲突这里mainnet是链对象[mainnet.id]是取链 ID1作为对象键两者含义不同但写法自然不会冲突。读取当前配置的链配置完成后可通过useChainsComposable 以响应式方式读取当前配置的链列表。其源码实现见 packages/vue/src/composables/useChains.ts内部调用getChains(config)初始化ref并通过watchChains订阅链配置变化在onScopeDispose时自动清理订阅最终返回只读的Ref。import { useChains } from wagmi/vue const chains useChains()对应的测试 packages/vue/src/composables/useChains.test.ts 验证了其响应式行为初始配置 3 条链时chains.value.length为 3当通过config._internal.chains.setState追加一条celo链后chains.value.length立即变为 4。自定义链从零定义一条网络Wagmi 官方文档site/vue/api/chains.md 内联的 create-chain 章节给出了两种自定义链的标准写法as const satisfies Chain或 Viem 的defineChain。两种方式都要求补齐必需的链属性TypeScript 会在缺失时给出类型错误指导你逐步完善。方式一as const satisfies Chainimport { type Chain } from viem export const mainnet { id: 1, name: Ethereum, nativeCurrency: { name: Ether, symbol: ETH, decimals: 18 }, rpcUrls: { default: { http: [https://eth.merkle.io] }, }, blockExplorers: { default: { name: Etherscan, url: https://etherscan.io }, }, contracts: { ensRegistry: { address: 0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e, }, ensUniversalResolver: { address: 0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da, blockCreated: 16773775, }, multicall3: { address: 0xca11bde05977b3631167028862be2a173976ca11, blockCreated: 14353601, }, }, } as const satisfies Chain方式二defineChainimport { defineChain } from viem export const mainnet defineChain({ id: 1, name: Ethereum, nativeCurrency: { name: Ether, symbol: ETH, decimals: 18 }, rpcUrls: { default: { http: [https://eth.merkle.io] }, }, blockExplorers: { default: { name: Etherscan, url: https://etherscan.io }, }, contracts: { ensRegistry: { address: 0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e, }, ensUniversalResolver: { address: 0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da, blockCreated: 16773775, }, multicall3: { address: 0xca11bde05977b3631167028862be2a173976ca11, blockCreated: 14353601, }, }, })两种写法效果等价as const satisfies Chain会让对象字面量获得精确的字面量类型并被Chain类型约束defineChain则通过函数参数校验并返回标准Chain对象。选择你习惯的一种即可。属性字段详解自定义链时添加的属性越多该链在 Wagmi 中使用体验越好。官方文档与社区链清单如ethereum-lists/chains数据集是获取这些信息的常用来源核心字段如下字段说明示例id网络的 Chain ID可在 ChainList 等站点按网络名查询如 Ethereum Mainnet 的 Chain ID 为11name人类可读的网络名称EthereumnativeCurrency网络原生货币含name、symbol、decimals三项{ name: Ether, symbol: ETH, decimals: 18 }rpcUrls至少一个公开、可信的 RPC URL通常放在default.http数组中[https://eth.merkle.io]blockExplorers区块浏览器集合至少提供default含name与url{ default: { name: Etherscan, url: https://etherscan.io } }contracts该链上已部署的合约地址可选见下{ multicall3: {...} }sourceId源链 ID例如 L2 对应的 L1 链 ID1testnet是否为测试网布尔值true关于contracts的补充说明contracts字段是可选但强烈建议的Wagmi 会在需要时自动使用这些合约例如批量读取时调用multicall3、ENS 相关操作使用ensRegistry/ensUniversalResolvermulticall3可选多合约聚合调用合约其地址绝大多数链上是0xca11bde05977b3631167028862be2a173976ca11部署区块号可在区块浏览器上查到示例中的14353601即以太坊主网部署区块。ensRegistry可选并非所有链都有 ENS Registry只有部署了 ENS 注册表的链才需要配置。ensUniversalResolver可选同样并非所有链都部署了 ENS Universal Resolver。若你自行部署这些合约请务必确保合约已在区块浏览器上完成验证否则依赖合约地址的调用可能失败。总结wagmi/vue/chains是viem/chains的零成本代理入口见 packages/vue/src/exports/chains.ts链数据完全由 Viem 提供并随 Viem 版本演进在 Vue 3 应用中通过import { mainnet } from wagmi/vue/chains导入内置链并在createConfig中组合chains与transports即可完成多链配置需要接入 Viem 未收录的网络时基于 Viem 的Chain类型或defineChain自定义链对象补齐id、name、nativeCurrency、rpcUrls、blockExplorers等核心字段并尽可能补充contracts尤其multicall3以提升 Wagmi 的聚合读与 ENS 能力链配置是响应式的useChains()会跟随配置变化自动更新packages/vue/src/composables/useChains.ts实测用例见 packages/vue/src/composables/useChains.test.ts。更多 Wagmi Vue 的入门与进阶内容可继续阅读 site/vue/getting-started.md、site/vue/api/createConfig.md 以及 site/vue/api/actions.md。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
