序章

Vueの計算されたプロパティを使用すると、依存関係が変更されたときにのみビューを更新する依存関係の計算でパフォーマンスを最大化しながら、複雑な操作やデータの書式設定を実行できます。 この機能は同期的です。

ただし、vue-async-computedパッケージでは、Promiseの解決された値をコンポーネントプロパティにバインドすることにより、コンポーネントで非同期計算プロパティを作成および使用できます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、ノードv15.10.0、npm v7.6.0、vue v2.6.11、およびvue-async-computedv3.9.0で検証されました。

プロジェクトの設定

プロジェクトをすばやく設定するために、この記事では @ vue /cliの使用をお勧めします。

注：この記事では、npxを使用して、@vue/cliのグローバルインストールを回避する方法を採用します。

  1. npx @vue/cli create vue-async-computed-example  --default

新しく作成されたプロジェクトディレクトリに移動します。

  1. cd vue-async-computed-example

vue-async-computedは、次のコマンドを使用してnpmからインストールできます。

  1. npm install vue-async-computed@3.9.0

次に、コードエディタでmain.jsファイルを開きます。 vue-async-computedをインポートして使用します：

src / main.js
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を使用するサンプルコンポーネントは次のとおりです。

src / components / MyComponent.vue
<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で書き換えることができます。

src / components / MyComponent.vue
<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ファイルを開きます。 新しいコンポーネントを使用するようにこのファイルを変更します。

src / App.vue
<template>
  <div id="app">
    <MyComponent/>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

次に、アプリケーションを実行します。

  1. npm run serve

Webブラウザでアプリケーションを観察します。 最初はdefaultメッセージは表示されません。 1秒経過すると、"Changed Value!"のメッセージが表示されます。

Promiseが解決される前のデフォルト値は、nullです。 デフォルト値を別のものにしたい場合は、get()関数とdefault: val | default: Functionプロパティを持つオブジェクトを使用できます。

default値を使用するサンプルコンポーネントは次のとおりです。

src / components / MyComponent.vue
<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>

このファイルへの変更を保存します。

次に、アプリケーションを実行します。

  1. npm run serve

Webブラウザでアプリケーションを観察します。 defaultメッセージ"No Changes"が最初に表示されます。 1秒経過すると、"Changed Value!"のメッセージが表示されます。

結論

この記事では、vue-async-computedをVueプロジェクトに適用してasyncComputedを利用しました。

このパッケージの長所と短所のいくつか、およびこの機能がデフォルトでVueコアで使用できない理由に関する決定は、このGitHubの問題でキャプチャされています。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。