1、stores下新建自己的js
stores/menu.js

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const usetopMenuStore = defineStore('topMenu', () => {
  const menuList = ref([])
  function getMenuList() {
    //此處為從后臺獲取的數(shù)據(jù)
    menuList.value = [
     { id: 1, name: '0.1元專區(qū)' },
     { id: 2, name: '兒科用藥' },
     { id: 3, name: '補益安捭' },
     { id: 4, name: '腸胃消化' },
     { id: 10, name: '元專區(qū)' },
     { id: 20, name: '兒科用藥' },
     { id: 30, name: '補益安捭' },
     { id: 40, name: '腸胃消化' },
     { id: 21, name: '兒科用藥' },
     { id: 31, name: '補益安捭' },
     { id: 41, name: '腸胃消化' }
    ];
  }
  return { menuList, getMenuList }
})

2、觸發(fā)getMenuList方法從后臺獲取數(shù)據(jù)

import { onMounted } from "vue";
import { usetopMenuStore } from "@/stores/menu.js";
onMounted(() => {
  usetopMenuStore().getMenuList();
});

3、使用menuList中數(shù)據(jù)
active-class="active" 添加激活狀態(tài)下樣式

 <div class="item" v-for="item in menuStore?.menuList" :key="item.id">
      <RouterLink active-class="active" :to="`/classify/${item.id}`"> {{ item.name }}</RouterLink>
 </div>

<script setup>
import { ref, onMounted } from "vue";
import { usetopMenuStore } from "@/stores/menu.js";
const menuStore = usetopMenuStore();
</script>