在异步实例上的 Vue3 中添加事件监听器

Question

为了提供一些背景信息，我以前是一名 React 开发人员，但最近过渡到使用 Vue3。目前，我正在尝试将事件侦听器附加到 web3 实例，但这似乎不是正确的方法。

我创建了一个

useWeb3()

可组合项，如下所示：

const useWallet = () => {
  const chainId = ref(null)

  const web3 = useAsyncState(async () => {
    // do some async work
    return await fooWeb3Instance();
  })

  watch(web3.isReady, async (isReady) => {
    if (isReady) {
      return null;
    }
    chainId.value = await web3.state.value.eth.getChainId();
  })

  console.log(web3.state.value) // correct value
  console.log(chainId); // 1

  return {
    web3,
    chainId
  }
}

现在我想在

web3

实例上添加一个全局事件侦听器，以检查

chainId

何时更改并从回调中更新该值。

web3.currentProvider.on('chainId', (nextChainId) => {
  chainId.value = nextChainId;
});

这里我有两个问题：

1. 一旦“useAsyncState”过程完成，利用“watch”功能更新“ref”是否合适？或者，是否有更有效的方法来完成这项任务？
2. 我应该在哪里添加监听器？

如果它是一个 React 应用程序，我将执行以下操作：

useEffect(() => {
  if (web3) {
    web3.on(...)
  }
}, [web3])