vue3中piniaPluginPersistedstate解决动态路由刷新空白问题

总结：使用了回调函数来防止持久化数据前就渲染页面，导致刷新空白

1.Store里的代码（**这里主要就是在addNewRoute写了回调callback**）

addNewRoute(menuList,() => {
    // 重新渲染
    router.push({path: '/home/individual'})
});

import { defineStore } from "pinia";
import {ref} from "vue";
import router from "../router/index.js";

// 添加新的路由
function addNewRoute(menuList,callback) {
    // 获取路由列表
    let routeli = router.options.routes;
    routeli.forEach((routeItem) => {
        if(routeItem.path === '/home'){
            menuList.forEach(menu => {
                console.log("addNewRoute");
                console.log(menu.menuclick);
                console.log(menu.menuname);
                console.log(menu.menucomponent);
                // 1.拿出每一个路由
                let children = {
                    path: '/home/'+menu.menuclick,
                    name: menu.menuclick,
                    meta: {
                        title: menu.menuname
                    },
                    component: () => import('../components/'+menu.menucomponent)
                }
                // 2.将子路由添加到路由列表中
                routeItem.children.push(children);
            })
        }
    })
   // 3.合并路由列表(必须一个一个合并)
    routeli.forEach(route => {
        router.addRoute(route);
    });
    callback(); // 调用回调函数表示完成
}

// 存放menu数据
export const userMenuStore
    = defineStore("menu", () => {
    // 菜单数据
    const menu = ref([]);
    // 定义修改菜单数据的方法（action 同步+异步）
    const setMenu = (menuList) => {
        // console.log(menuList);
        // 输出menuList的类型
        console.log(typeof menuList); // object
        // 菜单数据
        menu.value = menuList;
        console.log('menu.value',menu.value);
        // 添加新的路由(必须在此加个回调，意义就是等数据成功赋值后再渲染页面，不要抢渲染页面的时机，否则刷新会空白)
        addNewRoute(menuList,() => {
            // 重新渲染
            router.push({path: '/home/individual'})
        });
    };
    //以对象形式return供数组使用
    return {
        menu,
        setMenu
    };
},{
        persist:true
    }
)

2.你需要在App.vue中写个监听器，监听Store中的menu数据变化，数据变化就把新值给set进去

<script setup>
// 页面刷新必定会加载App.vue
// 从sessionStorage中获取用户信息
import { watch } from "vue";
import { userMenuStore } from "./stores/index.js";

const menustore = userMenuStore();
const user = JSON.parse(sessionStorage.getItem('user'));

// 监听store中menu栏的变化
watch(
    () => menustore.menu,
    (newValue, oldValue) => {
      // 如果用户信息存在，则获取菜单栏数据
      if(!oldValue && user && user.no){
        console.log('newValue:', newValue);
        menustore.setMenu(newValue);
      }
    },
    { immediate: true},// 回调函数会在 watch 创建时立即执行一次
);
</script>