参数更改时刷新我的 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>

现在问题来了（在我看来，这应该很容易）。我需要处理路线变更，特别是 slug。所以我将我的代码更改为：

    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);
      },
    });

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

Refresh my Vue Apollo query when params change

vuejs2

vue-composition-api

vue-apollo