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

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

00766b8e1f9c2665cf7fd29f9cf558df?s=128

odanado

June 12, 2020
Tweet

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