社区 › 业界 › Vue 缓存之坑，变量赋值方式和响应式数据

扈季雅 发表于 2025-8-26 09:08:18

Vue 缓存之坑，变量赋值方式和响应式数据

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);
    // ...
});
}这样可以确保你总是获取到最新的数据，而不是过时的拷贝值。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

岑韬哎 发表于 2025-10-21 19:25:35

这个有用。

洪势 发表于 2025-10-26 00:45:54

热心回复！

零幸 发表于 2025-10-28 21:36:53

新版吗？好像是停更了吧。

戟铵腴 发表于 2025-11-18 20:20:37

不错，里面软件多更新就更好了

申倩语 发表于 2025-11-23 17:16:21

感谢分享，学习下。

岳娅纯 发表于 2025-11-24 16:34:38

很好很强大我过来先占个楼 待编辑

箝德孜 发表于 2025-11-27 16:47:01

懂技术并乐意极积无私分享的人越来越少。珍惜

鸠站 发表于 2025-12-5 01:50:11

前排留名，哈哈哈

扒钒 发表于 2025-12-12 08:10:56

感谢发布原创作品，程序园因你更精彩

扒钒 发表于 2025-12-19 16:06:00

谢谢分享，试用一下

阎逼 发表于 2025-12-22 16:59:21

感谢分享

秦晓曼 发表于 2026-1-14 20:41:33

谢谢楼主提供！

厨浴 发表于 2026-1-14 22:20:25

很好很强大我过来先占个楼 待编辑

鞭氅 发表于 2026-1-18 04:15:59

不错，里面软件多更新就更好了

毋献仪 发表于 2026-1-18 10:45:33

收藏一下   不知道什么时候能用到

迭婵椟 发表于 2026-1-19 02:54:16

这个有用。

尹心菱 发表于 2026-1-20 14:04:01

感谢分享

聚怪闩 发表于 2026-1-21 15:59:37

分享、互助 让互联网精神温暖你我

些耨努 发表于 2026-1-26 07:29:21

用心讨论，共获提升！

查看完整版本: Vue 缓存之坑，变量赋值方式和响应式数据