使用wagmi core在Svelte中刷新后getAccount返回undefined的问题

核心原因 #

1. 未配置状态持久化：wagmi Core 默认不会将钱包连接状态持久化到本地存储，页面刷新后内存中的状态丢失，getAccount 只能返回初始的 undefined。
2. onMount 时机过早：页面刷新后，wagmi 还未完成与钱包的状态同步，此时调用 getAccount 拿到的是初始默认值，而非实际的连接状态。
3. 连接器未启用自动连接：部分钱包连接器（如 MetaMask）需要显式开启 autoConnect，否则页面刷新后不会自动尝试重新建立连接。

具体解决步骤 #

1. 配置状态持久化

在创建 wagmi 配置时，添加本地存储持久化器，让连接状态在页面刷新后得以保留：

import { createConfig, localStoragePersister } from '@wagmi/core';
import { mainnet } from '@wagmi/core/chains';
import { metaMask } from '@wagmi/core/connectors';

const config = createConfig({
  chains: [mainnet],
  connectors: [metaMask()],
  // 启用localStorage持久化
  persister: localStoragePersister({ key: 'wagmi' }),
});

2. 监听账户状态变化，而非仅在 onMount 调用一次

改用 wagmi 的订阅机制，实时监听账户状态更新，避免因时机问题拿不到最新状态：

<script>
  import { getAccount, subscribe } from '@wagmi/core';
  import { onMount, onDestroy } from 'svelte';
  import { config } from './your-config-file';

  let account = getAccount(config);
  let unsubscribe;

  onMount(() => {
    // 订阅账户状态变化
    unsubscribe = subscribe(config, {
      account: (newAccount) => {
        account = newAccount;
        // 处理账户更新后的逻辑，比如渲染地址、链信息等
      },
    });
  });

  onDestroy(() => {
    // 组件销毁时取消订阅
    unsubscribe?.();
  });
</script>

<!-- 页面渲染 -->
{#if account.address}
  <p>已连接账户：{account.address}</p>
{:else}
  <button on:click={handleConnect}>连接钱包</button>
{/if}

3. 启用连接器的自动连接

如果使用 MetaMask 等钱包，在初始化连接器时开启 autoConnect，让页面刷新后自动尝试重连：

const connectors = [
  metaMask({
    autoConnect: true,
  }),
];

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