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

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

2. 目次
 • 自己紹介
 • 発表のゴール
 • プロジェクトの背景
 • モチベーション
 • Vue.observable とは
 • エラーの状態を管理する
 2

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