如何从 Onboard.js 或 Web3Modal.js 设置 OpenSea.js 提供程序，然后在 Nuxt.js 中全局注入？

Question

使用 opensea-js 使用 Nuxt 构建静态生成的店面。 由于钱包提供商似乎最好的选择是 onboard.js 或 Web3modal。

在 Nuxt 中使用“注入”的组件之间共享代码和状态。 加载 onboard.js 和 opensea-js 作为客户端插件。

在初始加载 Onboard 被全局注入。 用户选择钱包后，板载订阅会触发回调函数wallet: (wallet) => {...}并且在其范围内当前提供者可用。 然后我将提供程序传递给 OpenSeaPort 并全局注入它。 但它不起作用， this.$seaport在从其他组件（页面）调用时未定义。

/plugins/onboardopensea.client.js

import { OpenSeaPort, Network } from "opensea-js";
import Onboard from "bnc-onboard";

export default ({ app }, inject) => {

  let seaport = {};

  const onboard = Onboard({
    dappId: "...",
    networkId: 1,
    subscriptions: {
      wallet: (wallet) => {

      seaport = new OpenSeaPort(wallet.provider, {
      networkName: Network.Main,
      apiKey: "...",
       });

      inject("seaport", seaport);
      },
    },
    walletSelect: {
      wallets: ...,
    },
)};

  inject("onboard", onboard);
}

似乎注入函数在第一次加载时只运行一次，并且在稍后从 Onboard 钱包回调函数调用时确实运行。

Answer 1

经过更深入的研究，似乎“注入”只被调用一次并附加到 Vue 实例和 Nuxt 应用程序。 使用“Vue.prototype.$seaport = seaport”代替，它可以随时从 Onboard Subscription 回调函数中调用。