vue-async-computedを使用してVue.jsで非同期計算プロパティを使用する方法
序章
Vueの計算されたプロパティを使用すると、依存関係が変更されたときにのみビューを更新する依存関係の計算でパフォーマンスを最大化しながら、複雑な操作やデータの書式設定を実行できます。 この機能は同期的です。
ただし、vue-async-computed
パッケージでは、Promise
の解決された値をコンポーネントプロパティにバインドすることにより、コンポーネントで非同期計算プロパティを作成および使用できます。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Vue.jsプロジェクトのセットアップおよびVue.jsコンポーネントの使用にある程度精通していると有益な場合があります。
- Promise、async、awaitにある程度精通していること。
このチュートリアルは、ノードv15.10.0、npm
v7.6.0、vue
v2.6.11、およびvue-async-computed
v3.9.0で検証されました。
プロジェクトの設定
プロジェクトをすばやく設定するために、この記事では @ vue /cliの使用をお勧めします。
注:この記事では、npx
を使用して、@vue/cli
のグローバルインストールを回避する方法を採用します。
- npx @vue/cli create vue-async-computed-example --default
新しく作成されたプロジェクトディレクトリに移動します。
- cd vue-async-computed-example
vue-async-computed
は、次のコマンドを使用してnpm
からインストールできます。
- npm install vue-async-computed@3.9.0
次に、コードエディタでmain.js
ファイルを開きます。 vue-async-computed
をインポートして使用します:
import Vue from 'vue'
import AsyncComputed from 'vue-async-computed'
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(AsyncComputed)
new Vue({
render: h => h(App),
}).$mount('#app')
この時点で、vue-async-computed
をサポートする新しいVueプロジェクトが作成されます。
asyncComputed
を使用する
標準のcomputed
プロパティとasyncComputed
プロパティにはいくつかの違いがあります。
asyncComputed
プロパティにセッターを含めることはできません。Promise
が解決されるまで、default
オプションが設定されていない限り、値はnull
です。
ほとんどの場合、それらをPromise
を返す計算されたプロパティとして扱うことができます。
asyncComputed
を使用するサンプルコンポーネントは次のとおりです。
<template>
<div>
<h2>Asynchronous Property</h2>
<p>{{myResolvedValue}}</p>
</div>
</template>
<script>
/* eslint-disable no-unused-vars */
export default {
asyncComputed: {
myResolvedValue() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Changed Value!'), 1000)
})
}
}
}
</script>
警告: eslint
のルールによっては、reject
が定義されているが、使用されていないという警告が表示される場合があります。 このチュートリアルでは、/* eslint-disable no-unused-vars */
のルールを無効にすることで、この問題を回避できます。
これは、ES7 / ES2016async / await
で書き換えることができます。
<template>
<div>
<h2>Asynchronous Property</h2>
<p>{{myResolvedValue}}</p>
</div>
</template>
<script>
/* eslint-disable no-unused-vars */
function asyncChange() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Changed Value!'), 1000)
})
}
export default {
asyncComputed: {
async myResolvedValue() {
return await asyncChange()
}
}
}
</script>
このファイルへの変更を保存します。
次に、コードエディタでApp.vue
ファイルを開きます。 新しいコンポーネントを使用するようにこのファイルを変更します。
<template>
<div id="app">
<MyComponent/>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue'
export default {
name: 'App',
components: {
MyComponent
}
}
</script>
次に、アプリケーションを実行します。
- npm run serve
Webブラウザでアプリケーションを観察します。 最初はdefault
メッセージは表示されません。 1秒経過すると、"Changed Value!"
のメッセージが表示されます。
Promise
が解決される前のデフォルト値は、null
です。 デフォルト値を別のものにしたい場合は、get()
関数とdefault: val | default: Function
プロパティを持つオブジェクトを使用できます。
default
値を使用するサンプルコンポーネントは次のとおりです。
<template>
<div>
<h2>Asynchronous Property</h2>
<p>{{myResolvedValue}}</p>
</div>
</template>
<script>
/* eslint-disable no-unused-vars */
export default {
asyncComputed: {
myResolvedValue: {
get() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Changed Value!'), 1000)
})
},
default: 'No Changes!'
}
}
}
</script>
このファイルへの変更を保存します。
次に、アプリケーションを実行します。
- npm run serve
Webブラウザでアプリケーションを観察します。 default
メッセージ"No Changes"
が最初に表示されます。 1秒経過すると、"Changed Value!"
のメッセージが表示されます。
結論
この記事では、vue-async-computed
をVueプロジェクトに適用してasyncComputed
を利用しました。
このパッケージの長所と短所のいくつか、およびこの機能がデフォルトでVueコアで使用できない理由に関する決定は、このGitHubの問題でキャプチャされています。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。