为什么我的异步调用不会在此 Vue 3 组件内触发（使用组合 API）？

Question

我正在尝试进行异步调用以从我的 Fauna 数据库中获取数据。但是我无法触发异步调用。

在 setup() 函数中我有 console.log("Setup is working"); 并且按预期工作。它在页面加载时显示。

然后在 callApi 异步函数中我有 console.log("callApi is working");。该异步函数在按钮单击事件上调用。但是当点击按钮时没有任何反应。该函数未被触发，也没有任何内容打印到控制台。

我做错了什么？

<template>
  <div>
    <div class="mb-5">
      <button class="btn btn-primary mt-5" @click="callApi">
        Call API
      </button>
    </div>

    <div class="result-block-container">
      <div :class="['result-block', executed ? 'show' : '']">
        <h6 class="muted">Result</h6>
        {{ JSON.stringify(apiMessage, null, 2) }}
      </div>
    </div>
  </div>
</template>

import { defineComponent, inject } from "vue";
import { query as q, client } from "faunadb";

export default defineComponent({
  name: "Api",
  setup() {
    console.log("Setup is working"); //<---- THIS PRINTS TO CONSOLE ON PAGE LOAD
    const callApi = async () => {
      console.log("callApi is working"); //<---- THIS DOES NOT PRINT TO CONSOLE ON BUTTON CLICK
      const apiMessage = null;
      const executed = false;
      const auth = inject("Auth");
      const accessToken = await Auth.getTokenSilently();
      try {
        const client = new Client({ secret: accessToken });
        const { Paginate, Documents, Collection, Lambda, Get, Var } = q;

        const data = await client.query(
          q.Map(
            Paginate(Documents(Collection("stores"))),
            Lambda(["storeRef"], Get(Var("storeRef")))
          )
        );

        console.log(data);
        apiMessage = data;
        executed = true;
      } catch (e) {
        console.log(e);
        apiMessage = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`;
      }
    };
  },
});

Answer 1

Usage with Templates

If setup returns an object, the properties on the object can be accessed in the component's template

您只需要return您希望模板可用的属性

return {
  callApi
}

为什么我的异步调用不会在此 Vue 3 组件内触发（使用组合 API）？

Why won't my async call fire inside this Vue 3 component (using composition API)?

javascript

vuejs3

vue-composition-api

Usage with Templates