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

Question

I'm following https://quasar.dev/vue-components/select#lazy-loading I have

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

inside the q-select and filterFn is

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

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

So when my api gets data back it puts it in my pinia store, which is happening on selecting options from another q-select in a neighboring component. I am watching that q-select's model and when it changes, I call my api passing it parameters (that I now know because of the selection) and updating the store once I have data. However I have to wait for that data to come back that's why I'm using the lazy load. It works, however a setTimeout is not efficient. Sometimes that data is coming back really fast and sometimes there is a load time of a few seconds if there's a lot of options. And sometimes I don't know how long it will take. So if it's longer than 2 seconds that function wont load it into my q-select. it just shows blank. Yet I don't want to set it higher and have users wait 3 seconds for a call that may only take one second. I'm using a promise and resolve to get the data, how can I lazy load asynchronously?

so in my api I set the data for the q-select as follows:

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

in a process data function that is called on the resolve as such:

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

then my store I just set as such

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

Answer 1

You can remove the timeout function. It is meant in the example just to simulate a delayed response from an api, but not necessary in real life. You would likely want to return your store data as a computed prop, to properly watch the response from the api if relying on a Pinia store.

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

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