如何解决Vue中初始化前访问initializeBoard的ReferenceError报错

报错原因 #

你遇到的ReferenceError是因为JavaScript中用const声明的函数存在暂时性死区：在initializeBoard函数被声明之前，你就尝试调用它来初始化nestedMenuitems的items，此时函数还未被定义，所以触发报错。

解决方案 #

调整代码逻辑，将菜单items的生成逻辑延迟到接口数据获取完成后执行，同时修正代码中的拼写错误和逻辑问题：

<script setup>
import { ref, onMounted } from 'vue';
import ApiService from '@/services/ApiService'; // 根据实际路径调整

const stores = ref([]);
// 初始化菜单时先将items设为空数组
const nestedMenuitems = ref([
    {
        label: 'Shipments',
        items: []
    },
]);

// 修正拼写错误（lable → label），并改为直接返回映射后的数组，避免全局数组的副作用
const initializeBoard = () => {
    return stores.value.map(store => ({ label: store.shop }));
};

onMounted(() => {
    ApiService.getStores().then((data) => {
        stores.value = data;
        // 数据获取完成后，更新菜单的items
        nestedMenuitems.value[0].items = initializeBoard();
    });
});
</script>

关键调整点 #

• 初始时nestedMenuitems的items设为空数组，避免提前调用未声明的函数
• 将initializeBoard的逻辑改为直接返回映射后的新数组，不再依赖全局的initialBoard，避免重复添加数据的问题
• 修正了lable的拼写错误（应为label），确保菜单选项能正确渲染
• 在接口请求成功并赋值stores.value后，再调用initializeBoard更新菜单的items

内容的提问来源于stack exchange，提问作者Aaron