---

はい。プログラムの話を続けます。まとめて書いてるので


今回のねらいは、Vuexストアとのアクセスがわかったので、その内部処理について考えることになります。
具体的な処理の実装をストアの方に持っていきたいということで、Vuex+axiosの話をググってるとこういうエントリにたどり着きました。なるほど。


これ、僕がやろうとしてる処理にかなり考え方が似てるんですが、言われてみればなるほどな･･････って感じです。
再利用性なんて考える必要があるのかどうかはさておき、実際外界に依存した実装はよくないのはわかるので、なんとかして避けましょう、というお話です。emitっていうのを使うわけですが、これは子コンポーネントから親コンポーネントに向けたイベント発火だそう。


とはいえ、ストアとの連携はいろんな呼び出し方があるので、どうするかは考えないとですね。

まずここで考えなくてはいけないのは算出プロパティとウォッチャですね。


基本的には算出プロパティ(computed)を使って実装すべきとのことなんですが、この前書いたコードではウォッチャを採用してますね。
API通信がウォッチャでいい合理的な理由をもう一度確認してみましょう。



非同期処理の実行や、処理をどのくらいの頻度で実行するかを制御したり、最終的なanswerが取得できるまでは中間の状態にしておく、これ全部今回のユースケースですね。
フォームが入力されたら非同期処理を実行したいんですが、いくらリアルタイムで更新するといっても更新しすぎるとサーバーへの負担が半端ないので、入力終了後0.5秒ほど待ってAPIを叩くようにしています。
で、結果が取得されるまで「検索中...」という表示にしたいというオーダーはこれに当てはまりますね、ということでwatchで監視でいいでしょう。


まだ実装できてない部分としましては、まずAPIを発行するにはまずストアを経由しなくてはならなくなったので、ストアの関数をどう呼び出すか、っていう話になりますね。


VueファイルからVuexへ接点を持つときは、基本的にactionメソッドを用いるとのことです。ディスパッチしましょう。
で、その後ですが、非同期で処理が進みstore内に検索結果が格納されたタイミングで、また別にイベント発火してその検索結果を取得する･･････みたいなのをやんないとなので、ストアを監視するものが必要になります。
それがsubscribeっていう機構らしいですが、書く場所としてはmounted部分らしいですね。
確かに考えてみればそうか。監視機構をマウントさせることでウォッチャにさせるわけですしね。変なとこに書いたところでどうやって呼び出すのって話になるか･･････。



で、コードは書き終わったんですけど、バリデーション組んでたら全然関係ないとこ壊れたんで、実際のコードはまたそのうち載せます(笑)