问题描述
这可能只是一个基本的 vue 问题,但我使用的是 Vue Apollo。 我有这样设置的组件:
export default defineComponent({
name: "Products",components: { Product },props: {
categorySlug: {
type: String,required: true,},setup(props) {
const { categorySlug } = toRefs(props);
const page = ref(1);
const skip = ref(0);
const result = reactive({ search: null,laoding: null,error: null });
Object.assign(result,useListProducts(categorySlug.value,page.value));
const more = () => {
skip.value += 12;
page.value += 1;
Object.assign(result,page.value));
};
return { ...toRefs(result),...{ skip,more } };
},});
如您所见,我有一个响应式对象设置,在调用组件设置方法时分配给它:
const result = reactive({ search: null,error: null });
Object.assign(result,page.value));
在我的模板中,我像这样迭代结果:
<base-fade-up class="row" :duration="0.1" tag="div">
<v-col
cols="12"
xl="2"
v-for="(product,index) in products"
:key="product.id"
:data-index="index"
:data-skip="skip"
>
<product class="product" :product="product"></product>
</v-col>
</base-fade-up>
<v-btn color="primary" @click="more()" v-if="search.hasMoreResults"
>Show more</v-btn
>
按下时,它执行more()方法:
const more = () => {
skip.value += 12;
page.value += 1;
Object.assign(result,page.value));
};
如您所见,我现在获得了第 2 页,因此第一页的产品不再在 搜索 对象中。 我想做的是从第一个查询中获取产品的副本,然后在每次按下更多按钮时添加到它们中。 我试过这个:
setup(props) {
const { categorySlug } = toRefs(props);
const page = ref(1);
const skip = ref(0);
const products = ref([]);
const result = reactive({ search: null,error: null });
Object.assign(result,page.value));
const more = () => {
skip.value += 12;
page.value += 1;
Object.assign(result,page.value));
};
products.value.push(result.search.value.items);
return { ...toRefs(result),...{ products,skip,more } };
},
[Vue 警告]:data() 中的错误:“TypeError:无法读取 null 的属性‘值’”
在这一行中抱怨 result.search.value
:
products.value.push(result.search.value.items);
我相信是因为承诺没有得到解决。 我在 useListProducts 中使用 Apollo 的 useResult 方法,如下所示:
import { useQuery,useResult } from "@vue/apollo-composable";
import * as listProducts from "@/graphql/api/query.products.gql";
export function useListProducts(slug: string,page = 1,itemsToShow = 12) {
const request: {
identifier?: string;
searchTerm: string;
itemsToShow: number;
page: number;
filters: any;
facets: string[];
} = {
searchTerm: "*",itemsToShow,page,filters: [
{
key: "CategorySlug",value: `'${slug}'`,],facets: ["Criteria/Attribute,count:100"],};
const { result,loading,error } = useQuery(listProducts,{
search: request,});
const search = useResult(result,null,(data) => data.search);
return { search,error };
}
谁能告诉我我做错了什么?
解决方法
经过一番挖掘,我在文档中找到了有关分页的内容(这实际上就是我正在做的事情),因此我设法将代码调整为:
export default defineComponent({
name: "Products",components: { Product },props: {
categorySlug: {
type: String,required: true,},setup(props) {
const { categorySlug } = toRefs(props);
const page = ref(1);
const skip = ref(0);
const { search,loading,error,fetchMore } = useListProducts(
categorySlug.value,page.value
);
const more = () => {
skip.value += 12;
page.value += 1;
const request = {
...params,...{
page: page.value,filters: [
{
key: "CategorySlug",value: `'${categorySlug.value}'`,],};
fetchMore({
variables: { search: request },updateQuery: (prev,{ fetchMoreResult }) => {
if (!fetchMoreResult) return prev;
//return fetchMoreResult;
console.log(fetchMoreResult);
return Object.assign({},prev,{
search: {
hasMoreResults: fetchMoreResult.search.hasMoreResults,total: fetchMoreResult.search.total,facets: [...prev.search.facets,...fetchMoreResult.search.facets],items: [...prev.search.items,...fetchMoreResult.search.items],__typename: prev["__typename"],});
},});
};
return { search,skip,more };
},});
这满足了 Estus 在评论中提到的所有内容,但它确实抛出了一个错误,我将创建一个关于 :D 的新帖子