ユニファ開発者ブログスマートフォン用の表示で見るユニファ開発者ブログユニファ株式会社システム開発部メンバーによるブログです。2019-05-29Vue.jsで複数ページにまたがるフォームをVuexを使わずに実装してみるVue.js滑り込みで東京オリンピックの抽選申し込みを済ませました、Webエンジニアの本間です。どの日でもよいので抽選に当たって欲しいのですが、全部当たると困ってしまう、なかなか悩ましい気持ちになりました。今回、Vue.jsを使った実装をしている中で、複数ページにまたがるフォームの実装で調査した内容を紹介しようと思います。ような遷移でフォームをsubmitする画面一覧です。この手の画面、サーバーサイドのみで実装しようとすると大変だったのですが、モダンフロントエンドの機能を活用することでかなり楽に実装できるようになりました。このような画面をVue.jsで実装することを考えます。Vuexを使う場合Vuexを使う場合、以下の流れで実装するのがスタンダードかなと考えています。等を使ってページ間を移動この実装方法はシンプルで何も問題ないように見えます。実装を進めていく中で細かいのですが、以下の事項が気になってきました。storeを使うのは違和感がある。storeになってしまう可能性がある。Vuex内のデータ初期化を適切なタイミングで行わないと前回操作したデータが残っている、といった不具合が発生する可能性がある。(サーバーサイドエンジニアだからかもしれませんが)データとバリデーションをまとめたFormクラスを定義して実装を進めたいのだが、VuexにObjectを保存するとデータを変更してもDOMに反映されないことがあったため避けたい。上記の理由からVuexを使わずに実装する方法がないか調査したのが、この記事の内容になっています。Vuexを使わない場合Vuexを使わない場合ですが、以下の流れで実装することができました。1つの親コンポーネントを定義し、このコンポーネントのdataに画面間で保存したいデータ構造、初期値を定義する。切り替えることを前提に、1つずつVueコンポーネントとして実装する。各画面がフォームのデータを参照、変更したい場合、親コンポーネントのdataに対して行う。componentはURLのhash値を見て切り替えるようにする。componentの切り替えを行う。これで、1つのページ内での擬似的なページ遷移を実現する。上記を実現する上でキーとなる技術を2つ紹介します。componentを使ってページ内で要素をtoggleする例が示されています。このtoggleする要素をサブページにすることが基本方針です。back/forwardにも対応できるようにしています。</div></template>こんな感じに動作します。.syncを使った双方向バインディングページ遷移するだけでは親コンポーネントに保存されているフォームデータを参照、更新することができません。複数の属性に対応したものになります。この修飾子を使うことで、親コンポーネントに保存されている任意のデータを子コンポーネントから参照、更新できるようになります。2つを指定したのと同じ。最終的には、バリデーションなどの機能も追加予定。getter/setterを使ったトリックを使用。}}</script>こんな感じで動きます。した機能を組み合わせると、Vuexなしでも複数ページにまたがるフォーム入力が実現できています。手元で動かしていただければと思います。https://bitbucket.org/unifa-public/vue-multiple-pages-form-test/src/master/まとめ複数ページにまたがるフォーム入力画面をVuexを使わずに実装する方法を紹介いたしました。筆者がフロントエンド専門ではないため、間違い等があるかもしれません。その場合、コメント等で指摘していただけるとありがたいです。いう機能があり、storeを階層構造で細分化できるようになっています。この機能を積極的に使って細分化していけば、storeに保存するデータがたくさんあったとしてもメンテナンスに困らないのかな、と考えるようにもなってきました。Vuexを使うパターンを用いるのか、使わないパターンを用いるのかは、メリット・デメリットをメンバー間で話し合い、プロジェクトごとで決めていくのがよさそうです。参考になったら幸いです。最後までご覧いただきありがとうございました。iOSエンジニアをやっていますわたなべと申します。リニューアルで実施した技術的な変更のご紹介お久しぶりです、Webエンジニアの本間です。去る2019年10月1日...2018-12-28開発者ブログ二周年&2018年人気記事ランキングみなさまこんにちは、赤沼です。Fargate)で運用する際のログ設定で工夫した点こんにちは、Webエンジニアの本間です。距離センサーでトイレセンサーを作ってみた皆様こんにちは。Detection月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。