const roleId = computed(() => { return getCurrentPortalUser() ? getCurrentPortalUser().roleId : '' })中有时候需要两次 才会重新计算

在这个 Vue.js 示例中，`roleId`是一个计算属性，它依赖于`getCurrentPortalUser()`函数的结果。当`getCurrentPortalUser()`返回一个新的用户对象，其`roleId`属性就会改变，进而触发`roleId`的重新计算。然而，由于它是异步操作，即`getCurrentPortalUser()`可能会从服务器获取数据，所以第一次访问时，如果该函数还未完成请求，`roleId`将会返回空字符串(`''`)，直到下次请求成功返回用户信息。

如果需要确保`roleId`在`getCurrentPortalUser()`有结果后再计算，你可以在访问`roleId`之前先检查是否已经加载了用户信息。例如，你可以添加一个布尔标志或者一个`Promise`来跟踪数据是否可用：

// 创建一个标记变量表示用户数据是否已准备好
const isReady = ref(false);

// 当用户获取成功时更新isReady并计算roleId
async function fetchData() {
  try {
    const user = await getCurrentPortalUser();
    setRole(user.roleId);
    setIsReady(true); // 设置isReady为true
  } catch (error) {
    console.error(error);
  }
}

// 使用isReady来控制何时计算roleId
const roleId = computed(() => {
  return isReady.value ? getCurrentPortalUser().roleId : '';
});

// 初始化数据加载
fetchData();

// 现在每次你需要roleId，isReady会被检查，只有在数据准备就绪时才会重新计算

这样，你只需要访问一次`roleId`，除非`isReady`变为`true`，否则不会再次尝试获取数据。