如何从 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);
}

似乎注入函数运行仅一次，在第一次加载时，并且在稍后从板载钱包回调函数调用时执行运行。

Answer 1

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

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

How to set OpenSea.js provider from Onboard.js or Web3Modal.js then inject globally in Nuxt.js?

javascript

vue.js

nuxt.js

web3

opensea