有没有更好的方法来延迟加载 q-select？

Question

我正在关注https://quasar.dev/vue-components/select#lazy-loading我有

@filter="filterFn"
@filter-abort="abortFilterFn"

在 q-select 和 filterFn 里面是

     filterFn (val, update, abort) {
        if (options.value !== null) {
          // already loaded
          update()
          return
        }

        setTimeout(() => {
          update(() => {
            options.value = store.vehicles;
          })
        }, 2000)
      },

因此，当我的 api 取回数据时，它会将其放入我的 pinia 存储中，这是在从相邻组件中的另一个 q-select 选择选项时发生的。 我正在观察 q-select 的 model，当它发生变化时，我调用我的 api 传递参数（我现在知道因为选择）并在我有数据后更新商店。 但是我必须等待数据返回，这就是我使用延迟加载的原因。 它可以工作，但是 setTimeout 效率不高。 有时数据返回得非常快，有时如果有很多选项，加载时间只有几秒钟。 有时我不知道要花多长时间。 因此，如果它超过 2 秒，function 将不会将其加载到我的 q-select 中。 它只是显示空白。 但我不想将它设置得更高，让用户等待 3 秒来等待可能只需要一秒钟的呼叫。 我正在使用 promise 并解析获取数据，我如何才能异步延迟加载？

所以在我的 api 中，我将 q-select 的数据设置如下：

case 'getVehicles':
  store.setVehicles(data.result); //switch on caller thats passed in
  break;

在这样调用解析的过程数据 function 中：

    function retrieveData(input, params, caller) {
      window.electron
        .sendRequest(input, params)
        .then((reply) => {
          processData(reply, caller);
        });
    }

然后我的商店我就这样设置了

    setVehicles(data: []) {
      this.vehicles = data;
    },

Answer 1

您可以删除超时 function。它在示例中只是为了模拟来自 api 的延迟响应，但在现实生活中不是必需的。 如果依赖 Pinia 商店，您可能希望将您的商店数据作为计算道具返回，以便正确观察来自 api 的响应。

const myStoreData = computed(() => {
  return store.data
});

filterFn (val, update, abort) {
  if (options.value !== null) {
   update()
    return
 } else {
 update(() => {
  options.value = myStoreData.value;
 })
}},