Vue.jsでのDryなエラーハンドリングと排他処理 - Qiita株式会社SKILLでエンジニアをしている田坂です。 今回は弊社で開発している職歴BANKという職歴サービスで 使用しているVuejsの実装の一部を紹介したいと思います。 1. 概要 既存の例外ハンドリング手法をまとめてProsConsを言及 例外ハンドリングをDryかつ、既存コードのロジックの変更をできるだけ抑えて実現した ついでにUI操作における排他処理機能を実装した 1.1 アプリケーションのシチュエーション 左の様な画面でユーザがフォーム送信などの操作をした時に、エラー画面に遷移させずその画面のままで 何が起きて何をすべきかを例えば右の画面の様にユーザに伝えたい状況について考えていきます。 なぜ画面そのままか → 画面が変わってしまうと、フォームの内容が消えるので、UXが悪くなりこれを回避するためです。 コードでいうと以下の様なactionを呼んで、Store.create(this
