Javascript Nuxtjs和Axios上的计算属性？

我想按名称返回一组独特的卡片。我可以使用以下代码在Vuejs中完成此操作

<template>
  <div id='Home'>

    <div class="columns is-multiline">
        <card v-for="card in uniqueCards" :card="card" :key="card.id"/>
    </div>

  </div>
</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from '@/components/Site/Card'

export default {
  name: 'Home',
  components: { Card },
  computed: {
    cards () {
      return this.$store.state.cards
    },
    uniqueCards () {
      return uniqBy(this.$store.state.cards, function (r) {
        return r.project
      })
    }
  }
}
</script>

从“lodash/uniqBy”导入uniqBy
从“@/components/Site/Card”导入卡
导出默认值{
姓名：'家'，
组件：{Card}，
计算：{
卡片（）{
归还此。$store.state.cards
},
唯一卡片（）{
返回uniqBy（此.$store.state.cards，函数（r）{
返回r.project
})
}
}
}

我正在将我的项目转换为Nuxtjs，并使用api获取appCards。如何使用axios实现与上述相同的功能？下面这段代码可以工作，但我想使用uniqueCards（）函数。我做错了什么

<template>    
    <div id="Home">

        <div class="columns is-multiline">
        <card v-for="card in appCards" :card="card" :key="card.id"/>
        </div>

    </div>
</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from "~/components/Card.vue";

export default {
    components: {
        Card
    },
    data() {
        return {
            appCards: []
        };
    },
    async asyncData({ $axios, params }) {
        try {
            let appCards = await $axios.$get(`/appcards/`);
            return { appCards };
        } catch (e) {
            return { appCards: [] };
        }
    },
    mounted: {
        uniqueCards () {
            uniqBy(this.appCards, function (r) {
                return r.project;
        })
        }
    },
};
</script>

从“lodash/uniqBy”导入uniqBy
从“~/components/Card.vue”导入卡；
导出默认值{
组成部分：{
卡片
},
数据（）{
返回{
应用卡：[]
};
},
异步数据（{$axios，params}）{
试一试{
让appCards=wait$axios.$get（`/appCards/`）；
返回{appCards}；
}捕获（e）{
返回{appCards:[]}；
}
},
安装：{
唯一卡片（）{
uniqBy（this.appCards，函数（r）{
返回r.project；
})
}
},
};

别担心，让它开始工作吧！我忘了正确的语法

<template>    
    <div id="Home">

      <section class="section is-small">
        <div class="container">
          <div class="columns is-multiline">
            <card v-for="card in uniqueCards" :card="card" :key="card.id"/>
          </div>
        </div>
      </section>

    </div>

</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from "~/components/Card.vue";

export default {
  components: {
    Card
  },
  data() {
    return {
      appCards: []
    };
  },
  async asyncData({ $axios, params }) {
    try {
      let appCards = await $axios.$get(`/appcards/`);
      return { appCards }
    } catch (e) {
      return { appCards: [] };
    }
  },
  computed: {
    uniqueCards: function () {
        return uniqBy(this.appCards, function (r) {
            return r.project
      })
    }
  }
};
</script>

从“lodash/uniqBy”导入uniqBy
从“~/components/Card.vue”导入卡；
导出默认值{
组成部分：{
卡片
},
数据（）{
返回{
应用卡：[]
};
},
异步数据（{$axios，params}）{
试一试{
让appCards=wait$axios.$get（`/appCards/`）；
返回{appCards}
}捕获（e）{
返回{appCards:[]}；
}
},
计算：{
唯一卡片：函数（）{
返回uniqBy（this.appCards，函数（r）{
返回r.project
})
}
}
};

别担心，让它开始工作吧！我忘了正确的语法

<template>    
    <div id="Home">

      <section class="section is-small">
        <div class="container">
          <div class="columns is-multiline">
            <card v-for="card in uniqueCards" :card="card" :key="card.id"/>
          </div>
        </div>
      </section>

    </div>

</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from "~/components/Card.vue";

export default {
  components: {
    Card
  },
  data() {
    return {
      appCards: []
    };
  },
  async asyncData({ $axios, params }) {
    try {
      let appCards = await $axios.$get(`/appcards/`);
      return { appCards }
    } catch (e) {
      return { appCards: [] };
    }
  },
  computed: {
    uniqueCards: function () {
        return uniqBy(this.appCards, function (r) {
            return r.project
      })
    }
  }
};
</script>

从“lodash/uniqBy”导入uniqBy
从“~/components/Card.vue”导入卡；
导出默认值{
组成部分：{
卡片
},
数据（）{
返回{
应用卡：[]
};
},
异步数据（{$axios，params}）{
试一试{
让appCards=wait$axios.$get（`/appCards/`）；
返回{appCards}
}捕获（e）{
返回{appCards:[]}；
}
},
计算：{
唯一卡片：函数（）{
返回uniqBy（this.appCards，函数（r）{
返回r.project
})
}
}
};

有什么问题？我不知道如何将

appCards

数据传递到函数

uniqueCards（）

并将其安装到

card

组件上？有什么问题？我不知道如何将

appCards

数据传递到函数

uniqueCards（））

并将其安装在

卡

组件上？即使您回答了自己的问题，也应解释问题所在以及解决问题的方法。即使您回答了自己的问题，也应解释问题所在以及解决问题的方法。