asyncComputed非同期計算プロパティ

asyncComputed非同期計算プロパティ
私たちのプロジェクトでは最近非同期計算属性を使用しており、個人的に使いやすいと思いますので、お勧めします.
一、ケース
次のようなシナリオを想定します.
1つのリストデータdataはインタフェースを介して返され、要求パラメータにidのデータがあり、このidデータが変化すると、インタフェースにデータの取得を再要求する必要がある.
一般的な方法で来ると、以下の手順で実現する必要があります.

dataでlistデータを定義する

methodsでrequestメソッドを定義する必要があります.要求インタフェースはlist

を割り当てます.

ページ作成時にrequestメソッドを呼び出し、初回データ

を得る.

は、watchによりidデータを傍受する、変化時にrequestメソッド(listデータの更新)

を呼び出す.
非同期計算プロパティを使用するには、次のコードのみが必要です.

  asyncComputed: {
    list () {
      return Vue.http.get('/get-list-by-id/' + this.id)
        .then(response => response.data)
    }
  }

次に、非同期計算プロパティについて詳しく説明します.
二、設置と使用

npm install --save vue-async-computed

Webpackやbrowserifyなどを使用する場合は、明確にVueを通過する必要がある.use実装インストール.

import Vue from 'vue'
import AsyncComputed from 'vue-async-computed'

Vue.use(AsyncComputed)

同期計算プロパティと同様に、非同期計算プロパティにはgetメソッドがありますが、setメソッドはなく、設定しても無視されます.

  asyncComputed: {
    blogPostContent: {
      get () {
        return Vue.http.get('/post/' + this.postId)
          .then(response => response.data.postContent)
       }
    }
  }

三、デフォルト
非同期計算プロパティは、デフォルト値を設定することもできます.データを最初にロードする前に使用します.

  asyncComputed: {
    blogPostContent: {
      get () {
        return Vue.http.get('/post/' + this.postId)
          .then(response => response.data.postContent)
       },
       default: 'Loading...'
       // default        ，            
       default () {
        return 'Loading post ' + this.postId
      }
    }
  }

デフォルト値はグローバル設定も可能です.

Vue.use(AsyncComputed, {
  default: 'Global default value'
})

四、再計算
非同期計算プロパティの依存項目は変化しない場合がありますが、再計算が必要です.
あるデータが変化したときの再計算はこのように書くことができます.

new Vue({
  data: {
    postId: 1,
    timesPostHasBeenUpdated: 0
  },
  asyncComputed: {
    blogPostContent: {
      get () {
        return Vue.http.get('/post/' + this.postId)
          .then(response => response.data.postContent)
      },
      // timesPostHasBeenUpdated        
      watch: ['timesPostHasBeenUpdated']
    }
  }
}

また、ポイント構文で特定のプロパティ値をリスニングすることもできます.watch:[‘a.b.c’,‘d.e’]はthisを傍受することができる.a.b.cとthis.d.e.
また、場合によっては手動で再計算をトリガーすることもできます.

  asyncComputed: {
    blogPosts: {
      get () {
        return Vue.http.get('/posts')
          .then(response => response.data)
      },
    }
  },
  methods: {
    refresh() {
      //     
      this.$asyncComputed.blogPosts.update();
    }
  }

五、条件付きの再計算
watchを使用すると再計算されますが、リスニング属性の値は考慮されません.
このときshouldUpdateを用いて具体的な条件での再計算が可能となる.

  asyncComputed: {
    blogPostContent: {
      get () {
        return Vue.http.get('/post/' + this.postId)
          .then(response => response.data.postContent)
      },
      // pageType    postId         ，           
      shouldUpdate () {
        return this.pageType !== 'index'
      }
    }
  }

六、lazy属性
非同期計算プロパティを常に再計算したくない場合があります.lazy:trueを使用して、最初のアクセス時にのみ計算できます.

  asyncComputed: {
    mightNotBeNeeded: {
      // mightNotBeNeeded          
      lazy: true,
      get () {
        return Vue.http.get('/might-not-be-needed/' + this.id)
          .then(response => response.data.value)
      }
    }
  }

七、計算状態
各非同期計算プロパティは、$asyncComputedにオブジェクト(オブジェクトの現在の計算ステータスに関する情報を含む)を追加します.
このオブジェクトには、次のプロパティがあります.

{
  //   ：updating, success, error
  state: 'updating',
  //    ，      true
  updating: true,
  //              ，       
  success: false,
  // promise    rejected
  error: false,
  // promise    rejected         
  exception: null
}

更新/エラー情報を表示します.

  asyncComputed: {
    posts() {
      return Vue.http.get('/posts')
        .then(response => response.data)
      }
    }
  }
  
//    posts      ，        
// 
 (Re)loading posts 

八、グローバルエラー処理
デフォルトでは、非同期計算プロパティでpromiseのrejectが発生した場合、vue-async-computedがエラーを記録します.
カスタムログ記録関数を使用する場合、プラグインはerrorHandlerオプションを受け入れます.このオプションは、エラー情報を使用して呼び出す関数である必要があります.
デフォルトでは、エラーのスタックトラッキングのみをパラメータとして呼び出しますが、errorHandlerとuseRawErrorをtrueに設定すると、関数は元のエラー、すなわちエラーのVueインスタンスの参照とエラーのスタックトラッキングを受信します.

Vue.use(AsyncComputed, {
  errorHandler (stack) {
    console.log('Hey, an error!')
    console.log('---')
    console.log(stack)
  }
)

// useRawError
Vue.use(AsyncComputed, {
  useRawError: true,
  errorHandler (err, vm, stack) {
    console.log('An error occurred!')
    console.log('The error message was: ' + err.msg)
    console.log('And the stack trace was:')
    console.log(stack)
  }
)

gitアドレス:vue-async-computed