Vue3---Pinia优化重复请求

若两个组件请求的数据是相同的，避免请求两次，可以使用Pinia集中管理数据，再由父组件请求，子组件使用

1. 

// category.js
import {defineStore} from "pinia";
import {ref} from "vue";
import {getCategoryAPI} from "@/apis/layout";

export const useCategoryStore = defineStore('category',()=>{
    // 导航列表逻辑
    // state
    const categoryList = ref([])
    // action
    const getCategory = async ()=>{
        const res = await getCategoryAPI()
        console.log(res)
        categoryList.value=res.result
    }
    return {categoryList,getCategory}
})

2.

// 父组件
<template>
    <div>
        <!--二级路由-->
        <LayoutFixed></LayoutFixed>
        <LayoutHeader></LayoutHeader>
        <router-view></router-view>
    </div>
</template>

<script setup>
import LayoutHeader from "@/views/Layout/components/LayoutHeader.vue";
import LayoutFixed from "@/views/Layout/components/LayoutFixed.vue";

// 触发获取导航列表的action
import {useCategoryStore} from "@/stores/category";
import {onMounted} from "vue";
const categoryStore = useCategoryStore()
onMounted(()=>categoryStore.getCategory())

3.

// 子组件1
<script setup>
import {useCategoryStore} from "@/stores/category";

const categoryStore=useCategoryStore()
</script>
<template>
<ul class="app-header-nav">
    <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
        <RouterLink to="/">{{ item.name }}</RouterLink>
     </li>
</ul>
</template>