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

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

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

odanado
PRO

June 12, 2020
Tweet

More Decks by odanado

Other Decks in Programming

Transcript

  1. Vue.observable で状態管理

    1

    Remote.vue #1

    @odan3240


    View Slide

  2. 目次

    ● 自己紹介

    ● 発表のゴール

    ● プロジェクトの背景

    ● モチベーション

    ● Vue.observable とは

    ● エラーの状態を管理する

    2


    View Slide

  3. 3


    View Slide

  4. 自己紹介

    ● Twitter: @odan3240

    ● 五反田にある会社でソフトウェアエンジニア


    ● 最近の興味

    ○ Vue.js (NuxtJS)

    ○ TypeScript

    ○ ブロックチェーン

    ○ AWS


    ● リモート勉強会で初LT

    4


    View Slide

  5. 発表のゴール

    ● Vue.observable の使い方を知る

    ● 状態管理の選択肢として Vue.observable を知る

    5


    View Slide

  6. プロジェクトの背景

    ● NuxtJS + TypeScript 製のプロダクト

    ● ページを超える状態管理をする必要性が出てきた

    ○ エラーの状態

    ○ ユーザーの状態

    ● 管理画面的な用途で使用される

    6


    View Slide

  7. プロジェクトの背景

    ● NuxtJS + TypeScript 製のプロダクト

    ● ページを超える状態管理をする必要性が出てきた

    ○ エラーの状態

    ○ ユーザーの状態

    ● 管理画面的な用途で使用される

    7


    View Slide

  8. モチベーション

    ● ページをまたいでグローバルな状態を管理したい

    ○ ページ内で収まる状態は

    page コンポーネントの data で管理


    ● Vuex は?

    ○ NuxtJS の Vuex のモジュールモードは

    ディレクトリ構成に対応するプロパティが動的に生える

    ■ TypeScript と相性が悪い

    ○ ほしいのは単方向データフローではなく

    グローバルな状態管理

    8


    View Slide

  9. Vue.observable とは

    ● Vue.js 2.6 から追加された API

    ● オブジェクトをリアクティブにできる

    ○ data 関数の仕組みもこれ


    9


    View Slide

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

    10


    View Slide

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

    ● Vue.js におけるエラーハンドリング

    ○ 例外発生時に Vue.config.errorHandler に登録されている関数
    が呼び出される

    11


    View Slide

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

    12


    View Slide


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



    13


    View Slide


  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


    View Slide

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

    ● 利点

    ○ エラー発生時に UI を変化させる

    コードをVue.js らしくかける

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

    15


    View Slide

  16. まとめ

    16


    View Slide

  17. まとめ

    ● Vue.observable を使うと

    リアクティブなオブジェクトを定義可能


    ● 要件的に Vuex でなくても良いと考えたので

    Vue.observable を採用


    ● エラーの状態を管理

    ○ Vue.config.errorHandler の呼び出し後

    状態を変化させる

    ○ エラー発生時に UI を変化させる

    コードをVue.js らしくかける

    17


    View Slide