NuxtJS中如何使用axios过滤API数据并解决map调用报错问题

TypeError: this.homeProdsx.map is not a function 报错的核心原因是：homeProdsx 不是数组类型，无法调用数组专属的 map 方法。
你当前代码里用 let homeProdsx = homeProds[0] 取了接口返回数组的第一个元素，这个元素通常是对象类型，自然没有 map 方法。

1. 修正数据取值逻辑 #

如果需要处理全量产品列表，不要取数组的第一个元素，直接赋值完整数组即可：

async asyncData({ $axios, params }) {
    const homeProds = await $axios.$get(process.env.backendurl + '/home-page-alls?slug=' + params.slug)
    // 直接赋值完整数组，不要取[0]；如果接口返回结构嵌套了data层，调整为homeProds.data即可
    let homeProdsx = homeProds 
    return { homeProdsx }
},

2. 计算属性增加边界判断 #

增加数组类型校验，避免接口返回空数据、请求失败时再次触发报错：

computed:{
    filteredapi(){
        // 类型校验通过才调用map，否则返回空数组兜底
        return Array.isArray(this.homeProdsx) ? this.homeProdsx.map(({ id, title, price }) => ({ id, title, price })) : []
    },
}

3. 过滤后的数据存入cookie #

可以用js-cookie工具实现存储，注意单条cookie最大容量一般为4KB，过滤后的数据不要超过该限制：

• 先安装依赖：npm install js-cookie
• 存储逻辑示例：

import Cookies from 'js-cookie'

// 监听过滤后的数据变化，自动存入cookie，过期时间可按需调整
watch: {
  filteredapi: {
    immediate: true,
    handler(val) {
      Cookies.set('filtered_prods', JSON.stringify(val), { expires: 7 })
    }
  }
}

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