Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.observable で状態管理 / vue-observable-state-management
Search
odanado
PRO
June 12, 2020
Programming
4
1.8k
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
June 12, 2020
Tweet
Share
More Decks by odanado
See All by odanado
@nestjs/bull の活用について
odanado
PRO
0
1k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
830
nuxtjs-axios-error-handling
odanado
PRO
0
260
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
290
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
170
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
410
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.1k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
PRO
9
53k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
PRO
1
6.1k
Other Decks in Programming
See All in Programming
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
Anthropic Cookbook のおすすめレシピ
schroneko
7
870
エンターテイメント業界で利用されるAWS
demuyan
0
210
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
670
2 週間で Twitter Bot を作ってみた
contour_gara
0
250
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
720
SIMD Parallel Programming with the Vector API
josepaumard
0
120
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
230
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
43
6.7k
What's new in Ruby 2.0
geeforr
337
31k
Debugging Ruby Performance
tmm1
70
11k
A better future with KSS
kneath
231
16k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Navigating Team Friction
lara
178
13k
Done Done
chrislema
178
15k
4 Signs Your Business is Dying
shpigford
175
21k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
What's in a price? How to price your products and services
michaelherold
237
11k
Transcript
Vue.observable で状態管理 1 Remote.vue #1 @odan3240
目次 • 自己紹介 • 発表のゴール • プロジェクトの背景 • モチベーション •
Vue.observable とは • エラーの状態を管理する 2
3
自己紹介 • Twitter: @odan3240 • 五反田にある会社でソフトウェアエンジニア • 最近の興味 ◦
Vue.js (NuxtJS) ◦ TypeScript ◦ ブロックチェーン ◦ AWS • リモート勉強会で初LT 4
発表のゴール • Vue.observable の使い方を知る • 状態管理の選択肢として Vue.observable を知る 5
プロジェクトの背景 • NuxtJS + TypeScript 製のプロダクト • ページを超える状態管理をする必要性が出てきた ◦ エラーの状態
◦ ユーザーの状態 • 管理画面的な用途で使用される 6
プロジェクトの背景 • NuxtJS + TypeScript 製のプロダクト • ページを超える状態管理をする必要性が出てきた ◦ エラーの状態
◦ ユーザーの状態 • 管理画面的な用途で使用される 7
モチベーション • ページをまたいでグローバルな状態を管理したい ◦ ページ内で収まる状態は page コンポーネントの data で管理
• Vuex は? ◦ NuxtJS の Vuex のモジュールモードは ディレクトリ構成に対応するプロパティが動的に生える ▪ TypeScript と相性が悪い ◦ ほしいのは単方向データフローではなく グローバルな状態管理 8
Vue.observable とは • Vue.js 2.6 から追加された API • オブジェクトをリアクティブにできる ◦
data 関数の仕組みもこれ 9
エラーの状態を管理する 10
エラーの状態を管理する • Vue.js におけるエラーハンドリング ◦ 例外発生時に Vue.config.errorHandler に登録されている関数 が呼び出される 11
エラーの状態を管理する 12
エラーの状態を管理する 13
エラーの状態を管理する • サンプルコード ◦ 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
エラーの状態を管理する • 利点 ◦ エラー発生時に UI を変化させる コードをVue.js らしくかける ▪
v-if で分岐して Snackbar やモーダルを表示 15
まとめ 16
まとめ • Vue.observable を使うと リアクティブなオブジェクトを定義可能 • 要件的に Vuex でなくても良いと考えたので
Vue.observable を採用 • エラーの状態を管理 ◦ Vue.config.errorHandler の呼び出し後 状態を変化させる ◦ エラー発生時に UI を変化させる コードをVue.js らしくかける 17