目标：通过pinia的store来进行组件状态的统一管理，这样大家都可以共用到这个组件的状态信息，就可以实现组件的联动

一、添加侧边栏菜单的点击事件：

1、CommonAside.vue里面添加click的事件

<el-menu-itemv-for="item in noChildren":index ="item.path":key="item.path"@click="handelMenu(item)"
>        

<el-menu-item-group  ><el-menu-itemv-for="(subItem,subIndex) in item.children":index ="subItem.path":key="subItem.path"@click="handleMenu(subItem)">

2、写入handleMenu的方法：

const router=useRouter() const route=useRoute() const handleMenu=(item)=>{     router.push(item.path) }

二、stores下面的index.js里面增加tags的状态：

function initState(){return {isCollapse:false,tags:[{path:'/home',name:'home',label:'首页',icon:'home'}],}
}

三、CommonTab.vue里面进行tags的动态获取，tags的值就是从store的state里面进行获取，而不是静态的在这个里面写一个ref的数组了：

import {useAllDataStore} from "../stores/index.js";
const store=useAllDataStore()const tags=computed(()=>store.state.tags)

四、在stores里面新增selectMenu的动作并暴漏出去

export const useAllDataStore = defineStore('allData', (a) => {//在 Setup Store 中：//ref() 就是 state 属性//computed() 就是 getters//function() 就是 actionsconst state = ref(initState())//需要把所有定义的state，getters，actions返回出去// 如果传进来的item的数组的值=home就不做操作，如果不等于home就查找state中tags数组的下标//findIndex(item=>item.name=val.neme)就相当于findIndex(item){item.name=val.name),，就是赋值了// 参数:回调函数,而回调函数中的参数代表数组中的元素参数// 返回值 : 返回值是元素在数组中的位置,差找不到则显示-1，没有找到，就将val的值插入到tags的数组里面，这样标签就可以增加了function selectMenu(val) {if (val.name === "home") {state.value.currentMenu = null;} else {let index = state.value.tags.findIndex(item => item.name === val.name)index === -1 ? state.value.tags.push(val) : "";}}return {state,selectMenu,};
})

五、在CommonAside.vue里面的handleMenu里进行使用

const handleMenu=(item)=>{     router.push(item.path);     store.selectMenu(item) 
}

六、最终的效果：