Javascript 松果 ｜ Vue3 访问深层对象中的数组

Pinia(base.js)

export const useBaseStore = defineStore('base', {
state: () => {
    return {
        areaLocal: [
            { id: 0, name: 'LAX' },
            { id: 1, name: 'SFO' },
            { id: 2, name: 'SAN' },
        ],
        areaLocal2: {
            area: [
                { id: 0, name: 'AAA'},
                { id: 1, name: 'BBB'},
                { id: 2, name: 'CCC'},
        ]},
    }
},
getters: {
    getAreaById: (state) => {
        return (areaId) =>
            state.areaLocal.find((areaLocal) => areaLocal.id === areaId)
    },..

在视图区域.视图

<script setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useBaseStore } from '../stores/base'

const areaStore = useBaseStore()
const { getAreaById } = storeToRefs(areaStore)
const areaIndex = ref(0)
</script>
<template>
    <div class="container">
        <h2>AREA: {{ getAreaById(areaIndex).name }}</h2>
....

这个，areaLocal，我得到"面积:LAX"，这是正确的，

state.areaLocal2.area.find((areaLocal2.area) => areaLocal.id.area === areaId

上面抛出了undefined个错误.