const { IsSuperAdmin } = useUserStore().userInfo;/*** 获取后台动态路由数据，解析并注册到全局路由** @returns Promise<RouteRecordRaw[]> 解析后的动态路由列表*/function generateRoutes() {return new Promise<RouteRecordRaw[]>((resolve, reject) => {console.log("userInfo", useUserStore().userInfo);console.log("IsSuperAdmin", IsSuperAdmin);.....}
这个问题涉及到 JavaScript 的变量赋值方式和响应式数据的特性。让我详细解释一下：
问题原因
const { IsSuperAdmin } = useUserStore().userInfo;
这行代码使用了解构赋值，它创建了一个新的变量 IsSuperAdmin，这个变量是原始值的拷贝，而不是引用。
具体解释
-
解构赋值创建的是拷贝：
const { IsSuperAdmin } = useUserStore().userInfo;相当于：const IsSuperAdmin = useUserStore().userInfo.IsSuperAdmin;- 这是一个值拷贝，不是引用
-
响应式数据需要特殊处理：
- 如果
useUserStore().userInfo是响应式对象（如 Vue 的 reactive 或 Pinia 的 store） - 直接解构会失去响应性，得到的是当前时刻的静态值
- 如果
-
console.log 显示的是不同来源：
useUserStore().userInfo.IsSuperAdmin→ 直接从 store 读取，获取最新值IsSuperAdmin→ 解构时拷贝的旧值，不会自动更新
解决方案
方案1：直接访问 store（推荐）
function generateRoutes() {return new Promise<RouteRecordRaw[]>((resolve, reject) => {const userStore = useUserStore();console.log("userInfo", userStore.userInfo.IsSuperAdmin); // 最新值console.log("IsSuperAdmin", userStore.userInfo.IsSuperAdmin); // 最新值// ...});
}
方案2：使用计算属性（如果需要响应式）
import { computed } from 'vue';const IsSuperAdmin = computed(() => useUserStore().userInfo.IsSuperAdmin);function generateRoutes() {return new Promise<RouteRecordRaw[]>((resolve, reject) => {console.log("userInfo", useUserStore().userInfo.IsSuperAdmin);console.log("IsSuperAdmin", IsSuperAdmin.value); // 使用 .value// ...});
}
方案3：使用 toRefs 保持响应性
import { toRefs } from 'vue';const { IsSuperAdmin } = toRefs(useUserStore().userInfo);function generateRoutes() {return new Promise<RouteRecordRaw[]>((resolve, reject) => {console.log("userInfo", useUserStore().userInfo.IsSuperAdmin);console.log("IsSuperAdmin", IsSuperAdmin.value); // 使用 .value// ...});
}
最佳实践
避免在函数外部解构响应式数据，而是在需要的时候直接从 store 中读取：
function generateRoutes() {return new Promise<RouteRecordRaw[]>((resolve, reject) => {const userStore = useUserStore();// 始终使用 userStore.userInfo.IsSuperAdmin 来获取最新值console.log("IsSuperAdmin status:", userStore.userInfo.IsSuperAdmin);// ...});
}
这样可以确保你总是获取到最新的数据，而不是过时的拷贝值。