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

1. const { IsSuperAdmin } = useUserStore().userInfo;
3.   /**
4.    * 获取后台动态路由数据，解析并注册到全局路由
5.    *
6.    * @returns Promise<RouteRecordRaw[]> 解析后的动态路由列表
7.    */
8.   function generateRoutes() {
9.     return new Promise<RouteRecordRaw[]>((resolve, reject) => {
10.       console.log("userInfo", useUserStore().userInfo);
11.       console.log("IsSuperAdmin", IsSuperAdmin);
12.       .....
13.   }

复制代码

这个问题涉及到 JavaScript 的变量赋值方式和响应式数据的特性。让我详细解释一下：
问题原因

1. 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（推荐）

1. function generateRoutes() {
2.   return new Promise<RouteRecordRaw[]>((resolve, reject) => {
3.     const userStore = useUserStore();
4.     console.log("userInfo", userStore.userInfo.IsSuperAdmin); // 最新值
5.     console.log("IsSuperAdmin", userStore.userInfo.IsSuperAdmin); // 最新值
6.     // ...
7.   });
8. }

复制代码

方案2：使用计算属性（如果需要响应式）

1. import { computed } from 'vue';
3. const IsSuperAdmin = computed(() => useUserStore().userInfo.IsSuperAdmin);
5. function generateRoutes() {
6.   return new Promise<RouteRecordRaw[]>((resolve, reject) => {
7.     console.log("userInfo", useUserStore().userInfo.IsSuperAdmin);
8.     console.log("IsSuperAdmin", IsSuperAdmin.value); // 使用 .value
9.     // ...
10.   });
11. }

复制代码

方案3：使用 toRefs 保持响应性

1. import { toRefs } from 'vue';
3. const { IsSuperAdmin } = toRefs(useUserStore().userInfo);
5. function generateRoutes() {
6.   return new Promise<RouteRecordRaw[]>((resolve, reject) => {
7.     console.log("userInfo", useUserStore().userInfo.IsSuperAdmin);
8.     console.log("IsSuperAdmin", IsSuperAdmin.value); // 使用 .value
9.     // ...
10.   });
11. }

复制代码

最佳实践

避免在函数外部解构响应式数据，而是在需要的时候直接从 store 中读取：

1. function generateRoutes() {
2.   return new Promise<RouteRecordRaw[]>((resolve, reject) => {
3.     const userStore = useUserStore();
4.     // 始终使用 userStore.userInfo.IsSuperAdmin 来获取最新值
5.     console.log("IsSuperAdmin status:", userStore.userInfo.IsSuperAdmin);
6.     // ...
7.   });
8. }

复制代码

这样可以确保你总是获取到最新的数据，而不是过时的拷贝值。

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