javascript - 异步挂载的钩子不等待 Feathers-Vuex useFind

Question

我在让阵列books.value登录到控制台时遇到了一些麻烦。useFind即使在等待函数之后，它仍然不返回任何结果。我已确认传递给查询的值存在结果。如果我在不刷新浏览器的情况下对代码进行更改，console.log它将起作用。我究竟做错了什么？

  import { useFind } from "feathers-vuex";

  async mounted() {
    const { Book } = this.$FeathersVuex.api;
    const pathBody = this.$route.path.split("/")[1];

    const bookParams = computed(() => {
      return {
        query: {
          referral_link: pathBody
        }
      };
    });

    const { items: books } = await useFind({
      model: Book,
      params: bookParams
    });

    console.log(books.value); // empty array
  }

Answer 1

要使用useFind你需要使用 vue 可组合 api 而不是普通的函数/选项。

它应该是这样的：

export default {
  component: 'PageName',
  setup(_ , { root }) {
    const { Book } = root.$FeathersVuex.api;
    const pathBody = root.$route.path.split("/")[1];

    const bookParams = computed(() => {
      return {
        query: {
          referral_link: pathBody
        }
      };
    });

    const { items: books } = await useFind({
      model: Book,
      params: bookParams
    });

    return {
      books
    }
  }
}

mounted此外，由于实际获取需要时间，因此数据将不存在。您可以添加isPending除了返回的items. 然后在您的模板上使用v-if.