vue-await-util

Processing asynchronous data in vue SFC components.

install

npm install vue-await-util

Usage

<script setup>
import {ref} from "vue";
import {useAwaitWatch, isPending} from "vue-await-util";
import {Skeleton, Spin, Flex, Button, ButtonGroup} from "ant-design-vue";

const count = ref(0);
const add = () => {
  count.value += 1;
};

const [resolve, watchOptions] = useAwaitWatch({
  deps: [count],
  handle: async ([count]) => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    return "hello" + count;
  }
});

</script>

<template>
  <Skeleton :loading="resolve.first">
    <Spin :spinning="isPending(resolve.status)">
      <Flex vertical align="center" gap="middle">
        <h1>{{ count }} - {{ resolve.data }}</h1>
        <ButtonGroup>
          <Button @click="add">add</Button>
          <Button @click="watchOptions.update">update</Button>
        </ButtonGroup>
      </Flex>
    </Spin>
  </Skeleton>
</template>

EOF