0

使用 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 钱包回调函数调用时运行。

4

1 回答 1

0

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

于 2022-01-02T17:45:38.533 回答