《Vue.js》複数のstoreのstateの値の変化を検知する方法

Vue.js

storeのstateの値の変化を探知する方法

created内で$store.watchのメソッドを定義

複数あるうちのあるstoreのstateの値の変化を検知する方法を紹介します。前提として、storeのファイルは以下のような構成です。

storeディレクトリ

・index.js

・module/question.js

・module/answer.js

question storeのerrorMessageというstateの値の変化を検知したい場合以下のメソッドをcreatedに定義してください。

ポイントはgettersの部分でどのstores、stateを使うかを指定することです。地味にここでハマってしまったんですよね。なぜなら他のサイトで紹介されている方法はどれもstoreが1つである場合 (store.jsしかないパターン)であったので、gettersの部分の指定をする必要がないコードが記載されていたからです。これを使うと複数のstoreを使ったパターンの場合はstateの変化を検知することができません。この部分でハマっている方は上のコードを試してみてください。少しでもお力になれれば幸いです。

番外編:働くエンジニアにおすすめアイテム3撰

記事の内容とは別に、日々エンジニアの業務を行う上で役に立っているアイテムを紹介します。どれも実際に使って良いと思ったものだけ紹介していますのでその点はご安心ください。

目の保温マッサージ

毎日使っている目の保温マッサージ機です。使うと翌日の疲労感が全く違います。1日中PCと睨めっこの人は今すぐ購入することを強くお勧めします。

座っている時の負担を減らす

このサポート座布団を購入してからデスクワークの疲労が激減しました。価格も安く購入しやすいのでコスパ最強です。現在職場でも愛用しています。

自宅での作業効率をあげる椅子

ゲーミングチェアを購入して、自宅での作業効率が最大化しました。座った途端集中モードに入ります。家で作業する人は絶対に買っておきたいアイテムです。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方はエンジニアとして最低限知らないとまずい知識ですのでどこかで購入し、読むことをお勧めします。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございます。また技術、経済、株式投資などのことを Twitter でも呟いていますので良かったらフォローよろしくお願いします。

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