参数更改时刷新我的 Vue Apollo 查询

Question

我是 vue 新手，但我不明白为什么似乎没有人能够回答这个问题。我原以为这很简单，但我找不到任何地方谈论它。 我有这个方法 getCategory 使用 Apollo 来查询我们的 graphQL API。 逻辑如下：

    import { useQuery, useResult } from "@vue/apollo-composable";
    import * as getCategoryBySlug from "@graphql/api/query.category.gql";

    export function useGetCategory(slug: string) {
      const { result, loading, error } = useQuery(getCategoryBySlug, { slug });
      const category = useResult(result, null, (data) => data.categoryBySlug);
      return { category, loading, error };
    }

当我想在组件中使用它时，我可以简单地这样做：

    import { computed, defineComponent } from "@vue/composition-api";

    import { useGetCategory } from "@logic/get-category";
    import CategoryTitle from "@components/category-title/category-title.component.vue";
    import Products from "@components/products/products.component.vue";

    import { defineComponent } from "@vue/composition-api";

    import { useGetCategory } from "@logic/get-category";
    import CategoryTitle from "@components/category-title/category-title.component.vue";
    import Products from "@components/products/products.component.vue";

    export default defineComponent({
      name: "Categories",
      components: { CategoryTitle, Products },
      setup(_, context) {
        const { category, loading, error } = useGetCategory(
          context.root.$route.params.slug
        );

        return { category, loading, error };
      },
    });

这很好。然后在我的模板中，我可以像这样做我需要做的事情：

    <template>
      <div>
        <category-title v-if="category" :category="category"> </category-title>
        <base-loader :loading="loading"> </base-loader>
        <products :category="category" v-if="category"></products>
      </div>
    </template>

    <script src="./category.component.ts" lang="ts"></script>
    <style src="./category.component.scss" lang="scss" scoped></style>

现在问题来了（在我看来，这应该很容易）。我需要处理路线变化，特别是蛞蝓。 所以我把我的代码改成了这样：

    import { computed, defineComponent } from "@vue/composition-api";

    import { useGetCategory } from "@logic/get-category";
    import CategoryTitle from "@components/category-title/category-title.component.vue";
    import Products from "@components/products/products.component.vue";

    export default defineComponent({
      name: "Categories",
      components: { CategoryTitle, Products },
      setup(_, context) {
        const result = computed(() => {
          return useGetCategory(context.root.$route.params.slug);
        });

        return { result };
      },
    });

这意味着我必须将我的模板更新为：

    <template>
      <div v-if="result">
        <category-title
          v-if="result.category.value"
          :category="result.category.value"
        >
        </category-title>
        <base-loader :loading="result.loading.value"> </base-loader>
        <products
          :category="result.category.value"
          v-if="result.category.value"
        ></products>
      </div>
    </template>

    <script src="./category.component.ts" lang="ts"></script>
    <style src="./category.component.scss" lang="scss" scoped></style>

这太丑了。 我的问题是，我可以解构计算的属性或其他东西，以便我的模板可以保持原样吗？

Answer 1

您可以解构 computed 返回的对象，但您将失去反应性（category、loading、error 通过解构 computed 值创建的变量在 computed 重新评估时不会更新）

你想要的是使用Vue Apollo能力刷新查询when it's variables change

    import { useQuery, useResult } from "@vue/apollo-composable";
    import * as getCategoryBySlug from "@graphql/api/query.category.gql";

    export function useGetCategory(params) {
      const { result, loading, error } = useQuery(getCategoryBySlug, params);
      const category = useResult(result, null, (data) => data.categoryBySlug);
      return { category, loading, error };
    }

在组件中...

    import { computed, defineComponent } from "@vue/composition-api";

    import { useGetCategory } from "@logic/get-category";
    import CategoryTitle from "@components/category-title/category-title.component.vue";
    import Products from "@components/products/products.component.vue";

    export default defineComponent({
      name: "Categories",
      components: { CategoryTitle, Products },
      setup(_, context) {
        const params = computed(() => 
          return {
             slug: context.root.$route.params.slug
          }
        ) 
       
        const { category, loading, error } = useGetCategory(params);
      },
    });