Vue.observable で状態管理 / vue-observable-state-management

Transcript

1. Vue.observable で状態管理
 1
 Remote.vue #1
 @odan3240


2. 目次
 • 自己紹介
 • 発表のゴール
 • プロジェクトの背景
 • モチベーション
 •

   Vue.observable とは
 • エラーの状態を管理する
 2


3. 3


4. 自己紹介
 • Twitter: @odan3240
 • 五反田にある会社でソフトウェアエンジニア
 
 • 最近の興味
 ◦

   Vue.js (NuxtJS)
 ◦ TypeScript
 ◦ ブロックチェーン
 ◦ AWS
 
 • リモート勉強会で初LT
 4


5. 発表のゴール
 • Vue.observable の使い方を知る
 • 状態管理の選択肢として Vue.observable を知る
 5


6. プロジェクトの背景
 • NuxtJS + TypeScript 製のプロダクト
 • ページを超える状態管理をする必要性が出てきた
 ◦ エラーの状態


   ◦ ユーザーの状態
 • 管理画面的な用途で使用される
 6


7. プロジェクトの背景
 • NuxtJS + TypeScript 製のプロダクト
 • ページを超える状態管理をする必要性が出てきた
 ◦ エラーの状態


   ◦ ユーザーの状態
 • 管理画面的な用途で使用される
 7


8. モチベーション
 • ページをまたいでグローバルな状態を管理したい
 ◦ ページ内で収まる状態は
 page コンポーネントの data で管理
 


   • Vuex は？
 ◦ NuxtJS の Vuex のモジュールモードは
 ディレクトリ構成に対応するプロパティが動的に生える
 ▪ TypeScript と相性が悪い
 ◦ ほしいのは単方向データフローではなく
 グローバルな状態管理
 8


9. Vue.observable とは
 • Vue.js 2.6 から追加された API
 • オブジェクトをリアクティブにできる
 ◦

   data 関数の仕組みもこれ
 
 9


10. エラーの状態を管理する
 10


11. エラーの状態を管理する
 • Vue.js におけるエラーハンドリング
 ◦ 例外発生時に Vue.config.errorHandler に登録されている関数 が呼び出される
 11


12. エラーの状態を管理する
 12


13. 
 エラーの状態を管理する
 
 
 13


14. 
 エラーの状態を管理する
 
 
 • サンプルコード
 ◦ https://github.com/odan-sandbox/vuejs-observable-sandbox
 • サンプルサイト


    ◦ https://vuejs-observable-sandbox.netlify.app/
 
 • ライブラリ
 ◦ Vue.js のエラーハンドリングをリアクティブ化する
 ◦ https://github.com/odanado/vue-reactive-error-handler
 14


15. エラーの状態を管理する
 • 利点
 ◦ エラー発生時に UI を変化させる
 コードをVue.js らしくかける
 ▪

    v-if で分岐して Snackbar やモーダルを表示
 15


16. まとめ
 16


17. まとめ
 • Vue.observable を使うと
 リアクティブなオブジェクトを定義可能
 
 • 要件的に Vuex でなくても良いと考えたので


    Vue.observable を採用
 
 • エラーの状態を管理
 ◦ Vue.config.errorHandler の呼び出し後
 状態を変化させる
 ◦ エラー発生時に UI を変化させる
 コードをVue.js らしくかける
 17