@udock/vue-plugin-data--await v0.1.0

data-await

概述

data-async 是 data 插件的一个扩展模块，提供一个方法以支持在模板中使用 Promise 对象。

安装

npm i vue-ufp-data-await 

配置

需配合 data 插件使用，在 data 配置中的 plugins 字段中添加 'await'

暂无配置参数

使用

基本功能

在组件的 data 或 computed 中定义 Promise 对象，例如下面的代码：

export default {
  data () {
    return {
      asyncData1: new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve('asyncData1')
        }, 1000)
      }),
      asyncData2 (resolve) {
        setTimeout(function () {
          resolve('asyncData2')
        }, 2000)
      }),
      asyncData3 () {
        // 特征是返回一个 Promise 对象
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            resolve('asyncData3')
          }, 2000)
        })
      })
    }
  }
}

在组件的模板中可以按如下方式使用：

<template>
  <div>
    {{$await(asyncData1)}}
    {{$await(asyncData2).prop}}
  </div>
</template>    

设置初始值

可以按如下方式设置初始值：

import _ from 'lodash'
export default {
  data () {
    return {
      asyncData1: _.extend(new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve('asyncData1')
        }, 1000)
      }), {default: 'loading...'})
    }
  }
}

更新值

Promise 均为一次性操作，如需更新值，只需重新对变量赋值即可，下面的代码演示了一个更新函数的实现方式：

import _ from 'lodash'
export default {
  methods: {
    updateValue () {
      this.asyncData1 = new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve('newValue')
        }, 1000)
      })
    }
  }
}

示例工程

下载

注意事项

暂无

已知问题

未处理异常情况