Vue+Pinia：使用node-forge时组件loading状态不及时更新问题

场景还原 #

使用Pinia 2.0.27开发带加载动画的按钮组件，点击按钮触发submitForm方法，调用UserStore的createCertificate方法。该方法逻辑为：

1. 将loading设为true
2. 调用forge.pki.rsa.generateKeyPair(2048)生成RSA密钥对
3. 在finally中将loading设为false

实际问题：密钥生成代码执行过程中，组件内的loading仍为false，加载动画显示严重延迟。

问题原因 #

forge.pki.rsa.generateKeyPair是同步阻塞式方法，会占用主线程执行大量计算。虽然createCertificate标记为async，但同步代码会直接阻塞JS事件循环，导致Vue的响应式更新（loading状态变更后的DOM渲染）被推迟到密钥生成完成后才执行，因此用户看不到及时的加载反馈。

解决方案 #

将同步的密钥生成操作放到异步任务中，让出主线程让Vue先完成DOM更新，再执行耗时的密钥生成逻辑。

修改Pinia Store代码 #

方案1：使用微任务（推荐）

import { defineStore } from "pinia";
import forge from "node-forge";

export const useUserStore = defineStore({
  id: "UserStore",
  state: () => ({
    loading: false,
  }),
  actions: {
    async createCertificate() {
      this.loading = true;
      try {
        // 把同步密钥生成放到微任务，让Vue优先更新DOM
        const keys = await Promise.resolve().then(() => 
          forge.pki.rsa.generateKeyPair(2048)
        );
        // 这里可以添加密钥生成后的后续业务逻辑
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
  },
});

方案2：使用宏任务

如果微任务仍有阻塞问题，可改用setTimeout：

async createCertificate() {
  this.loading = true;
  try {
    const keys = await new Promise((resolve) => {
      setTimeout(() => {
        resolve(forge.pki.rsa.generateKeyPair(2048));
      }, 0);
    });
    // 后续业务逻辑
  } catch (error) {
    console.error(error);
  } finally {
    this.loading = false;
  }
}

组件代码优化（可选） #

简化按钮的disabled绑定和文本显示逻辑：

<template>
  <!-- ...其他内容 -->
  <button
    type="submit"
    class="btn btn-primary"
    :disabled="loading"
    @click="submitForm"
  >
    <span
      v-show="loading"
      class="spinner-border spinner-border-sm"
      role="status"
      aria-hidden="true"
    />
    <span v-if="loading"> Wait </span>
    <span v-else> Create certificate </span>
  </button>
  <!-- ...其他内容 -->
</template>

<script setup>
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store/UserStore";

const { loading } = storeToRefs(useUserStore());
const userStore = useUserStore();

const submitForm = async () => {
  try {
    await userStore.createCertificate();
  } catch (error) {
    console.error(error);
  }
};
</script>

原理说明 #

通过将耗时的同步操作放到异步任务队列（微任务/宏任务），主线程会先处理完当前的响应式更新（loading变为true后的DOM渲染），再执行密钥生成的计算逻辑，从而保证加载动画能及时显示。

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