如何從 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 回調函數中調用。