Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

odanado

June 12, 2020
Tweet

More Decks by odanado

Other Decks in Programming

Transcript

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

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

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


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

  3. 
 エラーの状態を管理する
 
 
 • サンプルコード
 ◦ 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

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


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