---

私は重大な問題に直面している。（直訳風）



データの表示や並び替えができたのは良いものの、Vueがデータの変更をリアクティブにビューに反映してしまうため、例えばこの状態でまた別の文字をテキストフィールドに入力すると、検索結果がストアの方に格納され、そのストアからデータを読み出す現状の仕様だとリアルタイムで検索結果が再描写されてしまうんですよね。



なので、こんな風に配列をコピーすることで参照が途切れ、リアクティブにはならなくなります。


が、ここでもうひとつ問題がありまして、そうなると変更はされなくなるんですが、もう一度検索ボタンをクリックしたときURLが変わらないから画面が再描画されない(createdが呼ばれない)という問題がありまして。


優れたエコシステムであるがゆえの弊害です。さてどうしよう。
URLを見て、ページが一致してる場合のみ強制リロードとか？万が一URLが変更になった時地獄そうですね･･････。名前付きルートのパスが取れればいいんだけど･･････
他に思いつく手段としては、クリック時にmethodを呼び出して、ストア側で参照する方法ですね。しかしなんかびみょう･･････。


とりあえず原因を探したところ、わかってきました。



予想通りですが、まぁそういう仕様なんだそうで。ちなみにこれに書いてあることを試しても何の解決にも至りませんでした(笑)
DBのクエリキャッシュを信用すれば済む話なような気もしますけど、それでもapi通信を1回で済むものを2回もやる必要性を感じないので、やっぱり自分がやろうとしてることが一番エコなんだと信じることにします。

URLになんの変化ももたらさないのに再読み込みしてもしょうがないというエコシステムはどうやってもクリアできそうにないので、おとなしく観念してパラメータをつけてみようかなと思います。
具体的には、テキストボックス内の値をパラメータにして渡す、っていうことですね。検索には用いません。だって既に結果は取得しているんだもの。


この方法を取る合理的なメリットとしては、もし現在取得している画面と同じ検索文字であれば再描写をさせないという点に尽きますね。他に大したメリットないです(笑)
ただ、URLのパラメータを変化させることで、その変更をwatchすることができるのでまあ救われるのかな、といった感じです。


で、その具体的な実装が･･････



この部分なんですよね。あんまり具体的な仕様については把握してないんですが、ルート変更を検知した際にここが呼ばれるっぽいです。
ここでリアクティブな依存に基づくようなプロパティに変更を加えると、画面遷移したように見せることができるわけです。
この例だと、ストアからオリジナルの配列をコピーしてる、ってわけですね。それに基づいて描写されるので、検索文字列が変わった時だけ更新されるようになります。

現状、ボタン自体にはなんの制限もかけてないので、検索文字列が変わってないとまるでボタンが反応しないかのような振る舞いになっちゃうんですが、そのへんは算出プロパティあたりで適当なクラスを付与すれば解決できそうだなって思うので問題ないでしょう。たぶん。



これで、あとは同様のコンポーネントを並べていくと、名前から検索する機能は完成です。
はーーーつかれた。