如何使用组合 API 从 Vue 3 中的 main.js 访问组件 function

Question

Using Vue 3 and composition API I have a component that have this 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;
  }
};

What I need to do is to find a way to expose the previous component function so I can call it from the main.js. The scenario is that I'm creating an IIFFE with Vue 3 and Vite (a widget that the end user will load from a script) and hooking up a public function to it so the user can use it at any point in their code. That function can have or not have a callback that will expose a token implemented.

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");

So basically I'm trying to find a way to invoke the parent component function from the main.js file in order to manage how to save a token to the state of my application. That token can come from a default URL or in the shape of a callback function that the end-user will pass as an argument to the globally expose function coming from main.js.

Answer 1

main.js is meant for setting up your Vue application. Don't use this for any other code. It won't work. Simply create a separate.js file (eg utils.js) and export the function from there.

I'm not completely sure what you're trying to achieve exactly but it looks like an authentication process for logging in. What you're probably trying to do is call the login/logout functions from within a Vue component? This could be as simple as

// 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

I finally ended up exposing the function in the mounted hook like this:

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

Then inside the same component, I create a method that will process the callback:

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

And in the processingToken method, I deal with that token coming from the end-user callback function. I still have to navigate the pros and cons of exposing the function in the mounted hook.