vue(nuxt)でcomputedの呼び出しタイミングなど【使い方まとめ】

おすすめのオンラインプログラミング学習

vue(nuxt)のcomputedの覚書です。

vue(nuxt)でcomputedの呼び出しタイミング【使い方】

computedの呼び出しタイミング

computed: {
  test() {
    console.log('test')
  }
}

起動時に呼ばれますね。Html側で{{ test }}で呼び出しましょう。

{{ test }}
computed: {
  test: {
    get() {
      console.log('get')
      return 0
    },
    set(val) {
      console.log('set')
    }
  }
}

これだけでは起動時には呼ばれません。v-modelで呼んであげましょう。v-modelはcomputedだけではなく、dataなどに関連付けても使えます。

getはreturn必須です。エラーがでます。

computedとdata

computedとdataのどちらかに初期値が記載されていればOKです。

mapGettersなどから値を取得した場合、あえてcomputedに初期の処理を書いた方がいい場合もあります。

computedのthis

computedに限らず、thisを使うと、dataなどすべての値にアクセスできます。

computed: {
  test: {
    get() {
      this.name = 'vue-kun' // NG
      return this.name // OK
    },
    set(val) {
      this.name = val // OK
    }
  }
}

ただし、getの代入はダメです。

Unexpected side effect in "XXX" computed property

がでます。

computedのsetと表示変更

選択した際に表示を変える場合、次のように繋ぐのが便利ですね。

computed: {
  choice: {
    get() {
    },
    set(val) {
      this.selected = val
    }
  }
  show() {
    const show = this.selected
  }
}

this.selectedはもちろんmethodsなどでも取得できます。

computedからmethodsの呼び出し

computedからmethodsの呼び出しすることがあります。こちらは問題なくできます。

computed: {
  test() {
      this.addServerData(string)
  }
},
methods: {
  addServerData(name) {
    this.name = name
  }
}

ただ、watchで処理する場合もあります。

computedでfirebaseからデータを取得時にnull

computedでfirebaseからデータを取得時にnulがくる症状がでました。

とりあえず、以下のように応急処理しました。

computed: {
  ...mapGetters({ getData: 'data/getData' }),
  test: {
    get() {
      if (this.getData === null) {
        return null
      }
    }
    return this.getProfile.name
  },
  set(val) {}
}
created() {
  this.$store.dispatch('data/bindData')
},

初期化時と変更時に呼びだされますが、初期化時点ではnullがきてしまうようです。

computedとwatchの違いは戻り値

似ていますが、watchには戻り値がありません。そのためcomputedを使われる方が多いかもしれません。基本はcomputedです。

watchはapiの非同期通信などに使います。

computedの学習なら

computedの学習なら、、udemyに良質な教材があります。vue、nuxt、firestoreなどのおすすめ教材をまとめました。

vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。おすすめ本だけではなく、動画講座やサンプルコードも紹介していきます。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしていま...
スポンサーリンク

電子書籍のおすすめ比較

Computedのエラー

[Vue warn]: Computed property “” was assigned to but it has no setter.

[Vue warn]: Computed property "" was assigned to but it has no setter.

setterが必要なのにないですね。v-modelを使っているのにsetとgetの構成ではないということです。

基本的なことでしたが参考になれば幸いです。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました