Vue3 Pinia登录场景中异步获取Mac地址始终为null的问题

问题原因 #

useAppStore 中的 getMacAddress 是异步请求，调用 useAppStore 时请求会启动，但不会阻塞后续代码执行。登录逻辑中直接读取 appStore.mac.value 时，异步请求尚未完成，因此值为 null。

解决方案 #

1. 修改 useAppStore，添加等待Mac地址加载完成的方法

将异步请求的Promise保存下来，对外提供一个可等待的方法，确保外部能获取到已加载完成的Mac地址：

import { ref } from "vue";
import { ApiService } from "@/services";

export default function useAppStore() {
  const mac = ref(null);
  // 保存异步请求的Promise，用于外部等待
  const macLoadPromise = getMacAddress();

  async function getMacAddress() {
    const response = await ApiService.get("/getmac");
    mac.value = response.data.message;
  }

  // 提供方法让外部等待Mac地址加载完成
  async function waitForMac() {
    await macLoadPromise;
    return mac.value;
  }

  return { mac, waitForMac };
}

2. 更新登录逻辑，等待Mac地址加载完成

在登录的异步方法中，调用 waitForMac 等待Mac地址获取完成后，再继续处理用户信息：

export const useAuthStore = defineStore({
  id: "auth",
  state: () => ({
    user: JSON.parse(localStorage.getItem("user")),
    returnUrl: null,
  }),
  actions: {
    async login(form) {
      try {
        const res = await ApiService.post("/login", form);
        if (res.data.result) {
          const user = {
            username: res.data.username
          };
          const appStore = useAppStore();
          // 等待Mac地址加载完成后赋值
          user.macaddress = await appStore.waitForMac();
          
          this.user = user;
          localStorage.setItem("user", JSON.stringify(user));
          router.push(this.returnUrl || "/admin");
        } else {
          alert("auth error");
        }
      } catch (error) {
        console.log(error);
      }
    },
    logout() {
      this.user = null;
      localStorage.removeItem("user");
      router.push("/");
    },
  },
});

补充说明 #

• 将原来的 .then/.catch 改为 async/await 写法，代码更简洁且符合当前 login 方法的异步声明。
• 如果希望Mac地址在应用初始化时就完成加载，可以在 main.js 中提前调用 waitForMac，避免登录时的等待：

  import useAppStore from '@/stores/useAppStore';
  
  async function setupApp() {
    const appStore = useAppStore();
    await appStore.waitForMac();
    // 初始化Vue实例
    createApp(App).use(createPinia()).use(router).mount('#app');
  }
  
  setupApp();
  

内容的提问来源于stack exchange，提问作者MarioC