Vue 3组合式API下如何从main.js调用组件内的retrieveSignedJWT函数

嘿，我完全明白你要做的事——把组件里的retrieveSignedJWT函数暴露给main.js里的全局widget方法，让终端用户能通过window.myWidget.load随时触发它，不管是用默认URL获取token，还是传入自定义回调来提供token。下面给你几个Vue 3里实用的解决方案，你可以根据自己的项目架构选最合适的：

方案一：通过Vue组件实例直接调用（最直接快速） #

这个方法的核心是让main.js拿到App组件的实例，然后调用实例上暴露的函数：

1. 在组件中暴露函数
   如果你的retrieveSignedJWT是写在App.vue的<script setup>里，必须用defineExpose把函数暴露出去，否则外部无法访问组件内部的setup变量/方法：

<!-- App.vue -->
<script setup>
import { ref } from "vue";
// 你的其他变量定义：jwtUrl、token、errorMessage等
const jwtUrl = ref("你的默认JWT接口地址");
const token = ref("");
const errorMessage = ref("");

const retrieveSignedJWT = async (callback) => {
  // 原函数逻辑保持不变
  if (jwtUrl.value && !callback) {
    try {
      const response = await fetch(jwtUrl.value);
      const data = await response.text();
      if (!response.ok) {
        const error = (data && data.message) || response.statusText;
        throw new Error(error);
      }
      token.value = data;
      decodeToken(data);
      retrieveCategories();
    } catch (error) {
      errorMessage.value = error.message;
      console.error("There was an error!", error);
    }
  } else {
    token.value = callback;
  }
};

// 关键：把函数暴露给组件实例
defineExpose({ retrieveSignedJWT });
</script>

2. 在main.js中获取实例并调用函数
   修改main.js的代码，先创建app实例，挂载后拿到组件实例，然后在全局widget的load方法里调用这个实例上的函数：

// main.js
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");

// 创建app实例并挂载，同时获取组件实例
const app = createApp(App).use(store);
const appInstance = app.mount("#my-widget");

window.myWidget = {
  load: async function (endUserRetrievedJWT) {
    if (endUserRetrievedJWT) {
      const endUserJWT = endUserRetrievedJWT();
      // 调用组件实例上的异步函数，记得加await保证执行顺序
      await appInstance.retrieveSignedJWT(endUserJWT);
    } else {
      await appInstance.retrieveSignedJWT();
    }
  },
};

方案二：把函数抽离到公共模块（更优雅的模块化方案） #

如果这个JWT处理函数不仅组件需要，main.js也需要调用，最好把它抽成独立的工具函数，彻底解耦组件和调用逻辑：

1. 创建公共工具文件
   比如在src/utils/jwtHandler.js里定义这个函数，同时把相关的状态（比如token、errorMessage）移到Vuex store里管理（你已经在用store了，这是最佳选择）：

// src/utils/jwtHandler.js
import store from "@/store";

// 假设decodeToken和retrieveCategories也是公共函数，需要导入
import { decodeToken } from "./tokenUtils";
import { retrieveCategories } from "./categoryUtils";

export const retrieveSignedJWT = async (callback) => {
  const { jwtUrl } = store.state;
  if (jwtUrl && !callback) {
    try {
      const response = await fetch(jwtUrl);
      const data = await response.text();
      if (!response.ok) {
        const error = (data && data.message) || response.statusText;
        throw new Error(error);
      }
      // 通过store mutation更新token
      store.commit("SET_TOKEN", data);
      decodeToken(data);
      retrieveCategories();
    } catch (error) {
      store.commit("SET_ERROR_MESSAGE", error.message);
      console.error("There was an error!", error);
    }
  } else {
    store.commit("SET_TOKEN", callback);
  }
};

2. 在组件和main.js中导入使用
   组件里调用：

<!-- App.vue -->
<script setup>
import { useStore } from "vuex";
import { retrieveSignedJWT } from "@/utils/jwtHandler";
import { onMounted } from "vue";

const store = useStore();

// 组件初始化时调用（如果需要）
onMounted(() => {
  retrieveSignedJWT();
});
</script>

main.js里调用：

// main.js
import { createApp } from "vue";
import "@/assets/styles/index.scss";
import App from "./App.vue";
import store from "./store";
import { retrieveSignedJWT } from "@/utils/jwtHandler";

let div = document.createElement("div");
document.body.appendChild(div);
div.setAttribute("id", "my-widget");

createApp(App).use(store).mount("#my-widget");

window.myWidget = {
  load: async function (endUserRetrievedJWT) {
    if (endUserRetrievedJWT) {
      const endUserJWT = endUserRetrievedJWT();
      await retrieveSignedJWT(endUserJWT);
    } else {
      await retrieveSignedJWT();
    }
  },
};

这个方案让函数复用性更强，也符合现代前端的模块化设计，后续维护起来更方便。

方案三：利用Vuex Store的Action（统一状态管理） #

既然你已经在用Vuex，把JWT处理逻辑放到store的action里是非常合适的，这样所有需要调用这个逻辑的地方（组件、main.js）都可以通过store.dispatch来触发：

1. 在store中定义Action

// store/index.js
import { createStore } from "vuex";
// 导入需要的工具函数
import { decodeToken } from "@/utils/tokenUtils";
import { retrieveCategories } from "@/utils/categoryUtils";

export default createStore({
  state: {
    token: "",
    errorMessage: "",
    jwtUrl: "你的默认JWT接口地址"
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token;
    },
    SET_ERROR_MESSAGE(state, message) {
      state.errorMessage = message;
    }
  },
  actions: {
    async retrieveSignedJWT({ state, commit }, callback) {
      if (state.jwtUrl && !callback) {
        try {
          const response = await fetch(state.jwtUrl);
          const data = await response.text();
          if (!response.ok) {
            const error = (data && data.message) || response.statusText;
            throw new Error(error);
          }
          commit("SET_TOKEN", data);
          decodeToken(data);
          retrieveCategories();
        } catch (error) {
          commit("SET_ERROR_MESSAGE", error.message);
          console.error("There was an error!", error);
        }
      } else {
        commit("SET_TOKEN", callback);
      }
    }
  },
  modules: {}
});

2. 在组件和main.js中调用
   组件里调用：

<!-- App.vue -->
<script setup>
import { useStore } from "vuex";
import { onMounted } from "vue";

const store = useStore();

onMounted(() => {
  store.dispatch("retrieveSignedJWT");
});
</script>

main.js里调用：

// main.js
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");

createApp(App).use(store).mount("#my-widget");

window.myWidget = {
  load: async function (endUserRetrievedJWT) {
    if (endUserRetrievedJWT) {
      const endUserJWT = endUserRetrievedJWT();
      await store.dispatch("retrieveSignedJWT", endUserJWT);
    } else {
      await store.dispatch("retrieveSignedJWT");
    }
  },
};

这个方案适合需要全局管理token状态的场景，所有和token相关的操作都集中在store里，状态变化更可控。

备注：内容来源于stack exchange，提问作者Lowtrux