質問: Vue,Angular, Riot, React,などで、画面の一部を書き換える際の考え方について。 フロントエンドフレームワークを学び始めたばかりの者です。 上記のようなフレームワークを使ってSPAを構築する場合の画面更新の考え方について悩んでいます。 ちなみに、実際に使っているフレームワークはVueなのですが、設計の話なのでどんなフレームワークにも共通すると思い、その他のフレームワークも挙げさせていただいております。 悩んでいるのは、画面の一部を書き換えるようなアクションを行う場合、routerでやるべきか、vuex(その他のフレームワークならflux reduxなど?)でやるべきか、ということです。 私の考えとしては、 画面全体が変わるような場合(例えばトップ画面がから設定画面に移動、画面要素は全部変更)はrouterで画面更新を行う、 画面の一部が変わるような場合(例えば3カラムレイアウトのWebページとして、何かの操作に伴って一番右のカラムのコンテンツが入れ替わる)は、flux(vuex)で画面更新を行う というような形で良いのかな、とぼんやり思っています。 皆様の設計でこんな風にしたよ、というのがあったら参考にさせていただけないでしょうか? 初心者なので、かなり基本的なことかもしれませんが、ご教授いただけると幸いです。
回答: vuexは状態管理をするもののようですので、vuex vs routerという構図には違和感を覚えますが、それは置いておいて**URL構造をどうしたいか**じゃないでしょうか。 例えばECサイトのようなもので、 * 商品一覧 * 商品詳細 という2つのViewがあるとします。 SPAなのでガッツリ画面遷移せずに、 * 画面の左半分は商品一覧 * 画面の右半分は選んだ商品詳細が表示される として、右半分が部分書き換えされて商品詳細の内容がパラパラ変わるようなものだとしましょう。 routerを使うと、 * https://your.site/product#/list * https://your.site/product#/detail/112233 というように、商品112233を選択済みで詳細が表示された状態で表示するURLを作ることが出来ます。 メールや、SNSなどに商品詳細へのダイレクトリンクを貼ることができるというメリットがあります。