Wagmi Vue useDisconnect 完全指南断开连接 Composable 的用法、参数与源码剖析【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmiuseDisconnect 是wagmi/vue提供的一个响应式 Composable用于断开当前钱包与应用的连接disconnect。它在连接切换、账户登出、多账户管理等场景中扮演着收尾角色用户点击“Disconnect”按钮后它会清理掉当前的 connection 状态并让useConnection、useAccount等状态随之变为 disconnected。读完本文你将掌握 useDisconnect 的导入方式、完整参数与返回值、基于 TanStack Query 的 mutation 用法以及它底层如何通过disconnectaction 更新 config 状态。ImportuseDisconnect从wagmi/vue包中导出直接引入即可import { useDisconnect } from wagmi/vue从源码结构看该导出由 packages/vue/src/exports/index.ts 统一对外暴露Nuxt 模块 packages/vue/src/nuxt/module.ts 中同样复用了它因此无论你是纯 Vue 3 项目还是 Nuxt 项目导入路径一致。Usage基础用法一个按钮断开连接最典型的使用方式是在组件中调用useDisconnect()获取 mutation然后在按钮的点击事件中触发mutate()script setup langts import { useDisconnect } from wagmi/vue const disconnect useDisconnect() /script template button clickdisconnect.mutate() Disconnect /button /template对应的 config 配置示例可参考 site/snippets/vue/config.ts。需要说明的是上面的示例会断开当前current连接如果你想指定断开某个特定连接可以像下面这样传入connectorscript setup langts import { useDisconnect } from wagmi/vue import { useConnections } from wagmi/vue import { config } from ./config const { connections } useConnections() const disconnect useDisconnect() function onDisconnect() { // 断开第一个连接对应的 connector disconnect.mutate({ connector: connections.value[0]?.connector }) } /script与 useConnection 联动验证仓库中的单元测试 packages/vue/src/composables/useDisconnect.test.ts 完整演示了 useDisconnect 与useConnection的联动先通过connect建立连接断言address已定义、status为connected调用disconnect.mutate()后等待isDisconnected变为 true最终address变为 undefined、status变为disconnected。这印证了 useDisconnect 会同步驱动所有依赖连接状态的响应式数据更新。ParametersuseDisconnect的参数类型为UseDisconnectParametersimport { type UseDisconnectParameters } from wagmi/vueconfigConfig | undefined传入一个Config实例以替代从WagmiPlugin中自动获取的默认 config。在大多数情况下你不需要传它只有当你显式管理多个 config 实例、或需要在插件上下文之外使用时才需要指定script setup langts import { useDisconnect } from wagmi/vue import { config } from ./config const disconnect useDisconnect({ config, }) /script从源码看packages/vue/src/composables/useDisconnect.tsuseDisconnect内部通过useConfig(parameters)解析 config并通过useConnections({ config })获取当前全部连接因此即使你传入了自定义 config连接列表的获取也会保持一致。mutationTanStack Query 的 mutation 参数。注意Wagmi 出于内部实现需要不允许覆盖mutationFn与mutationKey它们被固定为指向disconnectaction 与[disconnect]其余 TanStack Query mutation 选项均可使用包括gcTimenumber | Infinity | undefined非活动缓存数据在内存中保留的毫秒数设为Infinity可禁用垃圾回收。metaRecordstring, unknown | undefined附加到 mutation 缓存条目的额外信息可在onError、onSuccess等回调中访问。networkModeonline | always | offlineFirst | undefined默认online用于控制离线时的网络行为。onError(error, variables, context?) ...mutation 出错时触发。onMutate(variables) ...在 mutation 执行前触发常用于乐观更新返回值会传递给onError与onSettled。onSuccess(data, variables, context?) ...mutation 成功时触发。onSettled(data, error, variables, context?) ...无论成败都会触发。queryClientQueryClient指定自定义 QueryClient否则使用最近上下文中的实例。retryboolean | number | ((failureCount, error) boolean) | undefined默认0不重试true无限重试数字则限制重试次数。retryDelaynumber | ((retryAttempt, error) number) | undefined控制重试间隔可用指数退避或线性退避函数。示例——在断开前做乐观 UI 更新、成功后弹提示script setup langts import { useDisconnect } from wagmi/vue import { useConnections } from wagmi/vue const { connections } useConnections() const disconnect useDisconnect({ mutation: { onMutate(variables) { // 断开前的乐观更新例如先将本地 UI 置为 disconnected console.log(onMutate, variables) }, onSuccess() { console.log(已断开连接) }, onError(error) { console.error(断开失败, error) }, }, }) /scriptReturn TypeuseDisconnect返回UseDisconnectReturnTypeimport { type UseDisconnectReturnType } from wagmi/vue返回值本质是一个 TanStack Query mutation 返回值通过 packages/vue/src/utils/query.ts 中的UseMutationReturnType封装并额外暴露了三个 Vueref/方法。字段说明如下字段类型说明mutate(variables, { onSuccess, onSettled, onError }) void触发断开的函数variables 为{ connector?: Connector }mutateAsync(variables, { onSuccess, onSettled, onError }) Promisevoid与mutate类似但返回可 await 的 Promisedatavoid \| undefined最近一次成功结果默认undefinederrorDisconnectErrorType \| null出错时的错误对象failureCountnumber失败次数成功后重置为0failureReasonDisconnectErrorType \| null重试失败的原因成功后重置为nullisError/isIdle/isPending/isSuccessboolean由status派生的布尔状态isPausedbooleanmutation 被暂停时为truereset() void重置 mutation 内部状态statusidle \| pending \| error \| successmutation 当前状态submittedAtnumbermutation 提交时间戳默认0variables{ connector?: Connector } \| undefined传给mutate的变量对象connectorsRefreadonly Connector[]当前所有连接的 connector 列表已废弃改用useConnectionsdisconnectDisconnectMutatemutate的别名已废弃disconnectAsyncDisconnectMutateAsyncmutateAsync的别名已废弃注意data的类型是void——disconnectaction 成功时并不返回任何业务数据你更多依赖status、isSuccess或useConnection的状态来判断断开是否完成。其中status的取值语义idle为执行前初始状态pending表示正在执行error表示上次尝试失败success表示上次尝试成功。TanStack Query 类型导入若需要显式声明类型可从wagmi/vue/query导入与 disconnect 相关的 mutation 类型import { type DisconnectData, type DisconnectVariables, type DisconnectMutate, type DisconnectMutateAsync, disconnectMutationOptions, } from wagmi/vue/query其中DisconnectData即voidDisconnectVariables为DisconnectParameters | undefined即{ connector?: Connector } | undefineddisconnectMutationOptions用于在非组件环境下直接构造 mutation 选项。ActionuseDisconnect底层调用的是 core 包中的disconnectaction文档原链接指向disconnect此处以仓库实际源码为准。该 action 的完整执行流程如下packages/core/src/actions/disconnect.ts解析目标 connector若传入parameters.connector则使用它否则从config.state中取current对应的连接及其 connector。调用connector.disconnect()通知钱包端断开同时移除change与disconnect事件监听、恢复connect事件监听避免断开后继续响应旧的变更事件。从 connections Map 中删除该连接。更新 config 状态若连接列表已空则重置为disconnected状态current: null否则自动切换到下一个连接作为新的current。持久化 recentConnectorId若存在新的 current 连接将recentConnectorId写入 storage供下次自动重连使用。mutation 选项的桥接在 core 包的 packages/core/src/query/disconnect.ts 中disconnectMutationOptions将options.mutation与固定的mutationFn、mutationKey: [disconnect]合并。useDisconnect正是通过disconnectMutationOptions(config, parameters)构造选项后交给useMutation见 packages/vue/src/composables/useDisconnect.ts这也是前文“不允许覆盖mutationFn/mutationKey”的原因。错误类型disconnect可能抛出的错误类型DisconnectErrorType包括ConnectorNotFoundError未找到指定 connector、ConnectorNotConnectedError指定 connector 未连接以及基类错误。类型断言测试见 packages/vue/src/composables/useDisconnect.test-d.ts其中验证了onError收到的 error 类型为DisconnectErrorType、onSuccess收到的 data 类型为void。完整实战示例最后给出一个带连接状态提示的完整组件将本文内容串起来script setup langts import { useDisconnect, useConnection } from wagmi/vue const { connections } useConnection() // 当前连接 const disconnect useDisconnect({ mutation: { onSuccess: () alert(连接已断开), onError: (error) console.error(断开失败, error), }, }) const isConnected connections.status.value connected /script template button v-ifisConnected :disableddisconnect.status.value pending clickdisconnect.mutate() {{ disconnect.status.value pending ? 断开中... : Disconnect }} /button /template这样按钮会随着连接状态自动显示/隐藏并在断开过程中禁用避免用户重复点击。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Wagmi Vue useDisconnect 完全指南：断开连接 Composable 的用法、参数与源码剖析
Wagmi Vue useDisconnect 完全指南断开连接 Composable 的用法、参数与源码剖析【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmiuseDisconnect 是wagmi/vue提供的一个响应式 Composable用于断开当前钱包与应用的连接disconnect。它在连接切换、账户登出、多账户管理等场景中扮演着收尾角色用户点击“Disconnect”按钮后它会清理掉当前的 connection 状态并让useConnection、useAccount等状态随之变为 disconnected。读完本文你将掌握 useDisconnect 的导入方式、完整参数与返回值、基于 TanStack Query 的 mutation 用法以及它底层如何通过disconnectaction 更新 config 状态。ImportuseDisconnect从wagmi/vue包中导出直接引入即可import { useDisconnect } from wagmi/vue从源码结构看该导出由 packages/vue/src/exports/index.ts 统一对外暴露Nuxt 模块 packages/vue/src/nuxt/module.ts 中同样复用了它因此无论你是纯 Vue 3 项目还是 Nuxt 项目导入路径一致。Usage基础用法一个按钮断开连接最典型的使用方式是在组件中调用useDisconnect()获取 mutation然后在按钮的点击事件中触发mutate()script setup langts import { useDisconnect } from wagmi/vue const disconnect useDisconnect() /script template button clickdisconnect.mutate() Disconnect /button /template对应的 config 配置示例可参考 site/snippets/vue/config.ts。需要说明的是上面的示例会断开当前current连接如果你想指定断开某个特定连接可以像下面这样传入connectorscript setup langts import { useDisconnect } from wagmi/vue import { useConnections } from wagmi/vue import { config } from ./config const { connections } useConnections() const disconnect useDisconnect() function onDisconnect() { // 断开第一个连接对应的 connector disconnect.mutate({ connector: connections.value[0]?.connector }) } /script与 useConnection 联动验证仓库中的单元测试 packages/vue/src/composables/useDisconnect.test.ts 完整演示了 useDisconnect 与useConnection的联动先通过connect建立连接断言address已定义、status为connected调用disconnect.mutate()后等待isDisconnected变为 true最终address变为 undefined、status变为disconnected。这印证了 useDisconnect 会同步驱动所有依赖连接状态的响应式数据更新。ParametersuseDisconnect的参数类型为UseDisconnectParametersimport { type UseDisconnectParameters } from wagmi/vueconfigConfig | undefined传入一个Config实例以替代从WagmiPlugin中自动获取的默认 config。在大多数情况下你不需要传它只有当你显式管理多个 config 实例、或需要在插件上下文之外使用时才需要指定script setup langts import { useDisconnect } from wagmi/vue import { config } from ./config const disconnect useDisconnect({ config, }) /script从源码看packages/vue/src/composables/useDisconnect.tsuseDisconnect内部通过useConfig(parameters)解析 config并通过useConnections({ config })获取当前全部连接因此即使你传入了自定义 config连接列表的获取也会保持一致。mutationTanStack Query 的 mutation 参数。注意Wagmi 出于内部实现需要不允许覆盖mutationFn与mutationKey它们被固定为指向disconnectaction 与[disconnect]其余 TanStack Query mutation 选项均可使用包括gcTimenumber | Infinity | undefined非活动缓存数据在内存中保留的毫秒数设为Infinity可禁用垃圾回收。metaRecordstring, unknown | undefined附加到 mutation 缓存条目的额外信息可在onError、onSuccess等回调中访问。networkModeonline | always | offlineFirst | undefined默认online用于控制离线时的网络行为。onError(error, variables, context?) ...mutation 出错时触发。onMutate(variables) ...在 mutation 执行前触发常用于乐观更新返回值会传递给onError与onSettled。onSuccess(data, variables, context?) ...mutation 成功时触发。onSettled(data, error, variables, context?) ...无论成败都会触发。queryClientQueryClient指定自定义 QueryClient否则使用最近上下文中的实例。retryboolean | number | ((failureCount, error) boolean) | undefined默认0不重试true无限重试数字则限制重试次数。retryDelaynumber | ((retryAttempt, error) number) | undefined控制重试间隔可用指数退避或线性退避函数。示例——在断开前做乐观 UI 更新、成功后弹提示script setup langts import { useDisconnect } from wagmi/vue import { useConnections } from wagmi/vue const { connections } useConnections() const disconnect useDisconnect({ mutation: { onMutate(variables) { // 断开前的乐观更新例如先将本地 UI 置为 disconnected console.log(onMutate, variables) }, onSuccess() { console.log(已断开连接) }, onError(error) { console.error(断开失败, error) }, }, }) /scriptReturn TypeuseDisconnect返回UseDisconnectReturnTypeimport { type UseDisconnectReturnType } from wagmi/vue返回值本质是一个 TanStack Query mutation 返回值通过 packages/vue/src/utils/query.ts 中的UseMutationReturnType封装并额外暴露了三个 Vueref/方法。字段说明如下字段类型说明mutate(variables, { onSuccess, onSettled, onError }) void触发断开的函数variables 为{ connector?: Connector }mutateAsync(variables, { onSuccess, onSettled, onError }) Promisevoid与mutate类似但返回可 await 的 Promisedatavoid \| undefined最近一次成功结果默认undefinederrorDisconnectErrorType \| null出错时的错误对象failureCountnumber失败次数成功后重置为0failureReasonDisconnectErrorType \| null重试失败的原因成功后重置为nullisError/isIdle/isPending/isSuccessboolean由status派生的布尔状态isPausedbooleanmutation 被暂停时为truereset() void重置 mutation 内部状态statusidle \| pending \| error \| successmutation 当前状态submittedAtnumbermutation 提交时间戳默认0variables{ connector?: Connector } \| undefined传给mutate的变量对象connectorsRefreadonly Connector[]当前所有连接的 connector 列表已废弃改用useConnectionsdisconnectDisconnectMutatemutate的别名已废弃disconnectAsyncDisconnectMutateAsyncmutateAsync的别名已废弃注意data的类型是void——disconnectaction 成功时并不返回任何业务数据你更多依赖status、isSuccess或useConnection的状态来判断断开是否完成。其中status的取值语义idle为执行前初始状态pending表示正在执行error表示上次尝试失败success表示上次尝试成功。TanStack Query 类型导入若需要显式声明类型可从wagmi/vue/query导入与 disconnect 相关的 mutation 类型import { type DisconnectData, type DisconnectVariables, type DisconnectMutate, type DisconnectMutateAsync, disconnectMutationOptions, } from wagmi/vue/query其中DisconnectData即voidDisconnectVariables为DisconnectParameters | undefined即{ connector?: Connector } | undefineddisconnectMutationOptions用于在非组件环境下直接构造 mutation 选项。ActionuseDisconnect底层调用的是 core 包中的disconnectaction文档原链接指向disconnect此处以仓库实际源码为准。该 action 的完整执行流程如下packages/core/src/actions/disconnect.ts解析目标 connector若传入parameters.connector则使用它否则从config.state中取current对应的连接及其 connector。调用connector.disconnect()通知钱包端断开同时移除change与disconnect事件监听、恢复connect事件监听避免断开后继续响应旧的变更事件。从 connections Map 中删除该连接。更新 config 状态若连接列表已空则重置为disconnected状态current: null否则自动切换到下一个连接作为新的current。持久化 recentConnectorId若存在新的 current 连接将recentConnectorId写入 storage供下次自动重连使用。mutation 选项的桥接在 core 包的 packages/core/src/query/disconnect.ts 中disconnectMutationOptions将options.mutation与固定的mutationFn、mutationKey: [disconnect]合并。useDisconnect正是通过disconnectMutationOptions(config, parameters)构造选项后交给useMutation见 packages/vue/src/composables/useDisconnect.ts这也是前文“不允许覆盖mutationFn/mutationKey”的原因。错误类型disconnect可能抛出的错误类型DisconnectErrorType包括ConnectorNotFoundError未找到指定 connector、ConnectorNotConnectedError指定 connector 未连接以及基类错误。类型断言测试见 packages/vue/src/composables/useDisconnect.test-d.ts其中验证了onError收到的 error 类型为DisconnectErrorType、onSuccess收到的 data 类型为void。完整实战示例最后给出一个带连接状态提示的完整组件将本文内容串起来script setup langts import { useDisconnect, useConnection } from wagmi/vue const { connections } useConnection() // 当前连接 const disconnect useDisconnect({ mutation: { onSuccess: () alert(连接已断开), onError: (error) console.error(断开失败, error), }, }) const isConnected connections.status.value connected /script template button v-ifisConnected :disableddisconnect.status.value pending clickdisconnect.mutate() {{ disconnect.status.value pending ? 断开中... : Disconnect }} /button /template这样按钮会随着连接状态自动显示/隐藏并在断开过程中禁用避免用户重复点击。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考