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，这个变量是原始值的拷贝，而不是引用。

具体解释

1、解构赋值创建的是拷贝：

const { IsSuperAdmin } = useUserStore().userInfo; 相当于：
const IsSuperAdmin = useUserStore().userInfo.IsSuperAdmin;
这是一个值拷贝，不是引用

2、响应式数据需要特殊处理：

如果 useUserStore().userInfo 是响应式对象（如 Vue 的 reactive 或 Pinia 的 store）
直接解构会失去响应性，得到的是当前时刻的静态值

3、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);
    // ...
  });
}

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

文章转载自： VipSoft

原文链接： https://www.cnblogs.com/vipsoft/p/19058216

体验地址： http://www.jnpfsoft.com/?from=001YH