登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›Vue 缓存之坑，变量赋值方式和响应式数据 ...

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

扈季雅 昨天 09:08
  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.   }
复制代码
1.png

这个问题涉及到 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. }
复制代码
这样可以确保你总是获取到最新的数据，而不是过时的拷贝值。

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

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
扈季雅
昨天 09:08

0

粉丝关注

19

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫