Vue可组合的 Promise 组件 – Vue Promised

Vue可组合的 Promise 组件 – Vue Promised
插件名称 vue-promised
发布时间 2021年6月10日
插件作者 posva

使用可组合承诺作为组件的 Vue 组件。

安装和下载:

# Yarn
$ yarn add vue-promised

# NPM
$ npm i vue-promised

使用

1. 导入Vue Promised。

import { Promised, usePromise } from 'vue-promised'
Vue.component('Promised', Promised)
export default {
  setup() {
    const usersPromise = ref(fetchUsers())
    const promised = usePromise(usersPromise)
    return {
      ...promised
    }
  },
}

2. 基本用法。

<template>
  <Promised :promise="usersPromise">
    <!-- Use the "pending" slot to display a loading message -->
    <template v-slot:pending>
      <p>Loading...</p>
    </template>
    <!-- The default scoped slot will be used as the result -->
    <template v-slot="data">
      <ul>
        <li v-for="user in data">{{ user.name }}</li>
      </ul>
    </template>
    <!-- The "rejected" scoped slot will be used if there is an error -->
    <template v-slot:rejected="error">
      <p>Error: {{ error.message }}</p>
    </template>
  </Promised>
</template>

变更日志:

v2.1.0 (06/08/2021)

  • 更新 vue-demi