Vue3+Vuetify3+Pinia：优化数组对象取值及Pinia getter传参问询

一、用Pinia带参Getter实现（推荐） #

Pinia的getter支持返回函数来接收参数，刚好适配你根据学年动态获取线路列表的需求。修改你的Store如下：

import { defineStore } from 'pinia'

export const useRouteStore = defineStore('routeStore', {
    state: () => ({
        routes: [
            {schoolyear: "2022-2023", routeList: ["L-K311", "L-K312", "L-K325", "L-K326", "L-K336"]},
            {schoolyear: "2023-2024", routeList: ["C-K311", "C-K312", "C-K325", "C-K326", "C-K336"]},
            {schoolyear: "2024-2025", routeList: ["N-K311", "N-K312", "N-K325", "N-K326", "N-K336"]},
        ]
    }),
    getters: {
        // 返回函数接收学年参数，返回对应线路列表
        getRoutesByYear: (state) => (schoolYear) => {
            const routeItem = state.routes.find(item => item.schoolyear === schoolYear)
            return routeItem ? routeItem.routeList : []
        }
    }
})

二、组件内的简化实现 #

1. 使用Pinia Getter的组件代码 #

在组件中直接调用getter函数，传入选中的学年即可：

<template>
  <v-select
    v-model="selectedSchoolYear"
    :items="schoolYears"
    label="选择学年"
  ></v-select>

  <v-select
    :items="routeStore.getRoutesByYear(selectedSchoolYear)"
    label="选择公交线路"
    :disabled="!selectedSchoolYear"
  ></v-select>
</template>

<script setup>
import { useRouteStore } from '@/stores/RouteStore'
import { computed, ref } from 'vue'

const routeStore = useRouteStore()
const selectedSchoolYear = ref('')

// 提取所有学年作为第一个选择器的选项（可选，也可直接写死）
const schoolYears = computed(() => {
  return routeStore.routes.map(item => item.schoolyear)
})
</script>

2. 组件内函数的简化（不使用Getter的情况） #

如果你不想用Getter，也可以用数组find方法简化原函数，同时注意**