问题描述

突然发现menu的store异常，pinia中查看到store数据正确，但是localstorage中的数据始终没有同步，但user的store没问题，具体如下：

menu的store：

user的store：

问题原因

进入系统之后，会先获取菜单，然后对菜单进行格式化，格式化后的数据保存到menu的store里的menuLists ，大致代码如下：

import { useMenuStore } from "@/store/modules.ts";
const menuStore = useMenuStore()
const { menuLists } = storeToRefs(menuStore)

async function getMenuData() {
  // 获取所有菜单
  const {data} = await getMenuList(rootMenuId)
  // 格式化菜单
  setMenuData(data??[], true)
  // 格式化之后的菜单保存到store里
  menuLists.value = data
}
// 格式化菜单
function setMenuData(data, isRoot) {
  data.forEach((lists, index) => {
    if (lists.url) {
      recursionMenu([lists], index)
    } else {
      recursionMenu(lists.menuList, index, lists)
    }
  })
}
// 迭代式 格式化菜单 - 给子菜单添加父菜单的信息
function recursionMenu(data, index, parent) {
  data.forEach(item => {
    if(parent){
      // 这行代码导致的问题
      item.parent = parent
    }
    if (item.menuList?.length) {
      recursionMenu(item.menuList, index)
    }
  })
}
...

应该是item.parent = parent导致菜单对象的引用出现问题

问题解决方案

把如下代码去掉

item.parent = parent

或改为如下，或lodash的深复制，防止引用错乱就好了

item.parent = JSON.parse(JSON.stringify(parent))