Vue.jsのcomputedな変数がリアクティブじゃなかった時の話

はじめに

まだまだVue.jsの修行中ですが、もうホントのホントに初心者だった頃、vueファイル内のgetter関数(算出プロパティ)がうまく機能しなくて悩んだ時の解決方法です。

console.log()などにエラーを吐いてくれたら原因を辿れるのですが、これはエラーが出なかったので四苦八苦していました。

結論

リアクティブに動作してほしい変数は、初期化しておきましょう
（storeにあろうが、localにあろうが関係なし）

getter関数が動かないよ・・・

ステート保存された変数をvueファイルから読み出す時、次のように書くと思います。
（Vue.js + JavaScriptにおけるcomputed（算出プロパティ）に相当するものが、TypeScriptの場合は次のようにgetで書けますね）

hoge.vue

<script lang="ts">
  ...
  get storedIds(): number[] {
    return this.$store.state.hoge.ids
  }
</script>

で、上のように書いた時、hogeステート内の変数idsに変更があった場合に、対応するvueファイルにも即座に反映されてリアクティブに描画させたいな、と思っていました。

が、実際には動作しません。

リアクティブに動かないどころが、うんともすんとも言いません。
おまけに、consoleにもエラーが出てこないので原因がわからずに困っていました。

初期化を

上の例ではstore内の変数を、getter関数を介してvueファイル内で使用するところを書いていますが、これはstoreとは関係なく、例えば次のようにvueファイル内で完結していても同じです。

hogehoge.vue

<template lang="ts">
  <div>{{ val2 }}</div>
  <input type="number" v-model="val1">
</template>

<script>
  ...
  val1!: number; // <- 初期化されていない

  get val2(): number {
    return this.val1 * 2;
  }
</script>

　
この例で、次のようにすればval1やval2はリアクティブになり、inputから操作できるようになります。

hogehoge.vue

<script lang="ts">
  ...
  val1: number = 1
  ...
</script>

　

最初に初期化しなくても、ライフサイクルフック内で初期化されても問題ありません。

hogehoge.vue

<script lang="ts">
  ...
  val1!: number; // <- 初期化されていない

  created() {
    this.val1 = 1;
  }
  ...
</script>

ということで

とにかく初期化さえされていればgetter関数でリアクティブに動作するので、ここだけ気をつけましょう。

単純な話でしたね。でも、単純なほど初心者にとっては（中級者以上にとっても？）デバッグが難しいこともまた事実かもしれません。

私の場合、getter関数内で参照していた変数がstore内にあった（別のファイルにあった）ので気づくのが遅くなってしまいました。

　

GitHubのスター数が伸び盛りのVue.jsで、しかもTypeScriptを使ってフロントをいじるようになりました。
JSと違ってTSの場合、ググってもドキュメントが少ないので気になることがあれば記事にして残していこうと思います。

以上、記念すべき Qiita初投稿 でした！
今後とも、よろしくお願いします！！