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
StorybookでモジュールモードのVuex storeを利用する / Use Mod...
Search
Roadagain
November 21, 2019
Programming
0
1.1k
StorybookでモジュールモードのVuex storeを利用する / Use Modules mode Vuex store in Storybook
Yumemi.vue #3 LT登壇資料です
Roadagain
November 21, 2019
Tweet
Share
More Decks by Roadagain
See All by Roadagain
@slack/bolt on Cloud Functions for Firebase
roadagain
2
990
HL-Report コントラクト開発裏話 / Developing Contracts of HL-Report
roadagain
1
680
Rustでオブジェクト指向エクササイズやってみた / OOP exercise in Rust
roadagain
0
420
RegExp the lifehack
roadagain
0
110
Other Decks in Programming
See All in Programming
Is Xcode slowly dying out in 2025?
uetyo
1
280
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
13k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
920
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
GPUを計算資源として使おう!
primenumber
1
120
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
VS Code Update for GitHub Copilot
74th
2
650
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
What's in a price? How to price your products and services
michaelherold
246
12k
We Have a Design System, Now What?
morganepeng
53
7.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Automating Front-end Workflow
addyosmani
1370
200k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Bash Introduction
62gerente
613
210k
Git: the NoSQL Database
bkeepers
PRO
430
65k
GitHub's CSS Performance
jonrohan
1031
460k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Facilitating Awesome Meetings
lara
54
6.4k
Transcript
StorybookͰ ϞδϡʔϧϞʔυͷVuex storeΛ ར༻͢Δ Roadagain
ࣗݾհͷ༻ҙ͕ ؒʹ߹Θͳ͔ͬͨΒ TwitterΛ։͘εϥΠυ https://twitter.com/ringoh72
ࣗݾհ Roadagain (Twitter: @ringoh72) גࣜձࣾϞόΠϧϑΝΫτϦʔ ࡢ10ͿΓʹࣃҩऀߦ͖·ͨ͠
ຊ
͋ΔNuxt.jsͷϓϩδΣΫτͰ VuexΛ͍࢝Ίͨ
ϞδϡʔϧϞʔυ • Nuxt.js͕ࣗಈͰVuex storeΛ࡞ΔϞʔυ • state, getters, actions, mutationsΛ ݸผͰexport͢Δ
• σΟϨΫτϦߏ͕moduleʹͳΔ https://ja.nuxtjs.org/guide/vuex-store/#ϞδϡʔϧϞʔυ
ΫϥγοΫϞʔυ • Nuxt.jsͰैདྷͷVuex storeΛѻ͏Ϟʔυ • store/index.jsͰVuex storeΛexport͢Δ • Nuxt 3Ͱഇࢭ༧ఆ
https://ja.nuxtjs.org/guide/vuex-store/#ΫϥγοΫϞʔυ
͔ͤͬͩ͘͠ ϞδϡʔϧϞʔυͰͬͯΈ͍ͨ
ͦͯ͠Ϳ͔ͭΔ Storybookͷน
StorybookͷVuex • αϙʔτ͞Ε͍ͯΔ͕ѻ͍͕গ͠໘ • storyͰVuex storeͷΠϯελϯεΛ͢ ඞཁ͕͋Δ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
StorybookͷVuex • αϙʔτ͞Ε͍ͯΔ͕ѻ͍͕গ͠໘ • storyͰVuex storeͷΠϯελϯεΛ͢ ඞཁ͕͋Δ • ϞδϡʔϧϞʔυ…ແཧͰʁ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
๚Εͨޫ໌ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
๚Εͨޫ໌ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
require.context • webpack͕ఏڙ͢Δಛघͳrequire • σΟϨΫτϦͷϑΝΠϧ໊ΛҰׅऔಘ͠ɺ ͦͷ··requireͰ͖Δ༏Εͷ https://webpack.js.org/guides/dependency-management/#requirecontext
ߟ͑ͨ͜ͱ require.contextͰϑΝΠϧ໊ΛऔಘͰ͖Δ “/“ ͷ༗ແͰ్த͔Ͳ͏͔அͰ͖Δ →͍͍ײ͡ʹ࠶ؼॻ͚͍͚ΔͷͰʁ
࣮ࡍʹͬͯΈͨ
storybook-with-moduled-vuex
storeͷߏஙؔ
storeͷߏங
ಈ࡞આ໌
ಈ࡞આ໌ 1. require.contextͰϑΝΠϧ໊ΛҰׅऔಘ 2. ϑΝΠϧ໊͝ͱʹrequireͯ͠ ϞδϡʔϧΛऔಘ 3. ϑΝΠϧ໊Λݟ֤ͯϞδϡʔϧΛஔ
“counter.js”ͳͷͰ ͦͷ··moduleʹͰ͖Δ counter: { namespaced: true, state, getters, actions, mutations
}
ಈ࡞આ໌: ͷ߹ Ϟδϡʔϧల։ͯ͠ऴΘΓ { counter: { namespaced: true, state, getters,
actions, mutations } }
“form/text.js” form͔Β ߋʹજͬͨmodule͕͋Δ form: { namespaced: true, module: { text:
{ namespaced: true, state, getters, actions, mutations } } }
ಈ࡞આ໌: ࢠ࣋ͪͷ߹ 1. ࣗͷkeyͱࢠͷkeyΛׂ “form/text.js” → “form” “text.js”
ಈ࡞આ໌: ࢠ࣋ͪͷ߹ 2. Vuex moduleͷܗΛ࡞Δ { parentKey: { namespaced: true,
module: {} } }
ಈ࡞આ໌: ࢠ࣋ͪͷ߹ 3. ܗΛ৽ͨͳrootͱͯ͠࠶ؼ { parentKey: { namespaced: true, module:
{} // ͕͜͜৽͍͠root } }
࣮Nuxt.js෦Ͱ ࣅͨΑ͏ͳ࣮Λ͍ͯͨ͠ https://github.com/nuxt/nuxt.js/blob/838bacf/packages/vue-app/template/store.js
༧Ί༻ҙͨ͠ͷ͕ ͪ͜ΒʹͳΓ·͢
·ͱΊ • ϞδϡʔϧϞʔυ࠶ݱՄೳ • ͱ͍͏͔ॻ͍ͯͨΒຊՈίʔυͬΆ͔ͬͨ • ͬͱεϚʔτͳղܾ๏ͳ͍͔ͳ͋…
Α͍͜Ϛω͠ͳ͍ͰͶʂ