值得庆幸的是，有一个插件。使用vue-async-computed 包可以通地将一个 promise 的值绑定到组件属性来创建和使用组件中的异步计算属性。
我们可以在项目的根目录下通过 yarn 或 npm 来安装 vue-async-computed 插件：
# Yarn
$ yarn add vue-async-computed
# NPM
$ npm i vue-async-computed --save接下来在你的项目中开启这个插件：
// main.js
import Vue from 'vue';
import AsyncComputed from 'vue-async-computed'
import App from 'App.vue';Vue.use(AsyncComputed);
new Vue({
el: '#app',
render: h => h(App)
});
如果你和我一样，对Vue的构建工具不是很熟悉的话，我建议你使用Vue官方提供的构建工具 Vue CLI 。默认情况，它提供了五种模板，你可以根据自己喜欢的方式选择自己需要的模板即可。
确认在项目中引用
vue-async-computed 之后，咱们就可以开始使用这个插件了。使用如何使用这个插件之前，先来简单的了解一些概念。在Vue中标准计算属性和异步属性之间有一些区别：
异步属性不能有 setter
直到 promise 的 resolve 为止，除非 default 被设置，否则该值为 null
在大多数情况下，你可以将它们视为返回
promise 的计算属性。
<!-- MyComponent.vue -->
<template>
<!-- 在一两秒后 myResolvedValue将变成"*Fancy* Resolved Value" -->
<h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template><script>
export default {
asyncComputed: {
myResolvedValue () {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
})
}
}
}
</script>
使用ES7 / ES2016的 async / await ，这将变得更简单：
<!-- MyComponent.vue -->
<template>
<!-- 在一两秒后 myResolvedValue将变成"*Fancy* Resolved Value" -->
<h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template><script>
function fancinessComesLater () {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
})
}
export default {
asyncComputed: {
async myResolvedValue() {
return await fancinessComesLater()
}
}
}
</script>
有关于vue-async-computed 更详细的使用和介绍，可以阅读其 官网 提供的相关介绍。
