vue.js 兄弟コンポーネントにあるオブジェクトのメソッド呼び出しの手法
現状
vue.js を使っています。
主な処理はhogeという比較的大きなクラスで行っています。
「メイン」コンポーネントと「サイド」コンポーネントで構成されており、hogeは主にメインコンポーネントで使用します。
そのため「メイン」コンポーネントのmountedでhogeをインスタンス化して使っています。
意見が欲しいこと
「サイド」でhogeにあるメソッドを使いたい場面になりました。
この場合以下の解決方法がありますが、どれがよさそうでしょうか?
「ユニットテスト」の容易性の観点も必要になりそうです。
1.vuexでhogeを状態管理しておく。
「サイド」はvuex経由でhogeを操作する。
store.hoge.test();
2.vuexで「メイン」コンポーネントを状態管理しておく。
「サイド」では、vuex経由で「メイン」にあるメソッドを実行し、hogeを操作する。
store.main.test();
※main.testでは、hoge.test()を呼び出している。
3.vuexのmutationで「メイン」のメソッドを実行する。
store.test();
※store.test()では、main.test()を呼び出している。
※main.testでは、hoge.test()を呼び出している。
自分で試したこと
2の方法を試したのですが、JESTでユニットテストするにあたり、テストしずらいと感じました。
「store.hoge.test();」のような記述となり、モックの作り方に迷ったためです。
そこでまずは3の方法で実装してみました。
みなさんならどのようにhogeを操作しますでしょうか?
0