如何使用組合 API 從 Vue 3 中的 main.js 訪問組件 function

Question

使用 Vue 3 和組合 API 我有一個組件有這個 function：

const retrieveSignedJWT = async (callback) => {
  if (jwtUrl.value && !callback) {
    //console.log("There's no callback use the by default URL")
    await fetch(jwtUrl.value)
      .then(async (response) => {
        const data = await response.text();
        // check for error response
        if (!response.ok) {
          // get error message from body or default to response statusText
          const error = (data && data.message) || response.statusText;
          return Promise.reject(error);
        }
        let jwt = data;
        token.value = data;
        decodeToken(jwt);
        retrieveCategories();
      })
      .catch((error) => {
        errorMessage.value = error;
        console.error("There was an error!", error);
      });
  } else {
    //Function has a callback
    token.value = callback;
  }
};

我需要做的是找到一種方法來暴露之前的組件 function 以便我可以從 main.js 中調用它。 場景是我正在使用 Vue 3 和 Vite（最終用戶將從腳本加載的小部件）創建一個 IIFFE，並將公共 function 連接到它，以便用戶可以在他們的代碼中的任何位置使用它。 那個 function 可以有也可以沒有回調來公開實現的令牌。

import { createApp } from "vue";
import "@/assets/styles/index.scss";
import App from "./App.vue";
import store from "./store";
let div = document.createElement("div");
document.body.appendChild(div);
div.setAttribute("id", "my-widget");
window.myWidget = {
  load: function (endUserRetrievedJWT) {
    if (endUserRetrievedJWT) {
      const endUserJWT = endUserRetrievedJWT();
      //Calling my component function w a call back
      retrieveSignedJWT(endUserJWT);
    } else {
      //Calling my component function without a call back 
      retrieveSignedJWT();
    }
  },
};
createApp(App).use(store).mount("#my-widget");

所以基本上我試圖找到一種方法來從 main.js 文件調用父組件 function，以便管理如何將令牌保存到我的應用程序的 state。 該令牌可以來自默認 URL 或回調 function 的形式，最終用戶將作為參數傳遞給來自 main.js 的全局公開 function。

Answer 1

main.js 用於設置您的 Vue 應用程序。 不要將此用於任何其他代碼。 它不會工作。 只需創建一個單獨的 .js 文件（例如 utils.js）並從那里導出 function。

我不完全確定你到底想實現什么，但它看起來像是登錄的身份驗證過程。你可能想做的是從 Vue 組件中調用登錄/注銷功能？ 這可能很簡單

// Separate file, e.g. `authentication.js`
export const login = (cb) => {
  // do not name the callback function (cb) 'callback' as that may get you unexpected behavior
  // Your code
  somePromise().then((res) => {
    cb(res);
  });
}

// Your component
import { login } from 'path/to/authentication';

login(myCallback);

const myCallback = (res) => {
 ...
};

Answer 2

我終於在掛鈎中暴露了 function，如下所示：

onMounted(() => {
  window.myWidget = {
    load: retrieveEndUserJWT,
  };
  retrieveDataAttributes();
  callWebsocket(websocket.value);
});

然后在同一組件內，我創建了一個處理回調的方法：

const retrieveEndUserJWT = async (endUserRetrievingTokenCallback) => {
  const jwt = await endUserRetrievingTokenCallback();
  processingToken(jwt);
};

在 processingToken 方法中，我處理來自最終用戶回調 function 的令牌。我仍然需要了解在已安裝的掛鈎中公開 function 的利弊。