在vue3组合式API中使用hooks函数 返回的响应式对象无法使用是什么原因？

作者站长头像
站长
· 阅读数 23

最近在使用vue3组合式API，参照博主@MrBigShot 的建议自己写了几个hooks，有一个函数返回的响应式对象无法解包，不知道什么原因

hooks.js
//获取事件记录
export const useGetTableData = () => {

    const tableData = reactive({ value: [] })
    //记录数据是否已全部加载完成
    const hasLoadALL = ref(false)
    //记录getTableData函数调用次数 默认初始化时返回第1页数据 前十条
    let page = 1
    const getTableData = async () => {
 
        let pageSize = 3
        //nums用来记录从哪个位置开始加载数据 初始时从位置0开始 也就是从第一条数据开始加载
        let nums = (page - 1) * pageSize
        console.log(nums,'weizhi')
        //每次返回数据集的条数 默认10条

        const res = await axios.get('GetRecordList', {
            params: {
                nums,
                pageSize
            }
        })
        if (res.data.success) {
            tableData.value = JSON.parse(res.data.data)
            page++
        } else {
            hasLoadALL.value = true
        }
 
    }
    return {
        tableData,
        getTableData,
        hasLoadALL
    }
}
<script type="module">
    const { createApp, ref, reactive, toRefs } = Vue
    import { useGetTableData } from '../../Content/Hooks/hooks.js'
    import RecordCard from '../../Content/Components/RecordCard.js'
    const app = createApp({
        components: {
            RecordCard
        },
        setup() {
            const active = ref('dating')
            const onClickLeft = () => history.back()
            const loading = ref(false);
            const list = ref([]);
            const finished = ref(false);
            const themeVars3 = reactive({
                cascaderOptionsHeight: 'auto'
            })
            const currentDate = ref(['2021', '01', '01'])
            //onLoad事件 用来获取列表数据
            const { tableData, getTableData, hasLoadALL } = useGetTableData()
            const onLoad = () => {
                //发起Ajax请求获取记录数据 默认每次获取10条
                getTableData()
                 console.log(tableData, '表格value')
> 我想要遍历tableData
> 中的数组项一直失败    tableData.value.forEach(item => {
>                     list.value.push(item)
>                 })
                // 加载状态结束
                loading.value = false;
                //所有数据加载完成
                if (hasLoadALL.value) {
                    finished.value = true;
                }
            }
  
 
            }
            return {
                active,
                onClickLeft,
                loading,
                finished,
                onLoad,
                list
     
                
            }
        },

    });

    app.use(vant)
    app.mount('#app');

</script

console.log(tableData) 控制台中明明有数据的在vue3组合式API中使用hooks函数 返回的响应式对象无法使用是什么原因？

回复
1个回答
avatar
test
2024-07-02
export const useGetTableData = () => {
    // Use ref instead of reactive
    const tableData = ref([])
    // ...
}


const onLoad = async () => {
    // 注意这里加了 await
    await getTableData()
    console.log(tableData.value, '表格value')
    // tableData
    tableData.value.forEach(item => {
        list.value.push(item)
    })
    // ...
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容