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
970
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
910
HL-Report コントラクト開発裏話 / Developing Contracts of HL-Report
roadagain
1
630
Rustでオブジェクト指向エクササイズやってみた / OOP exercise in Rust
roadagain
0
370
RegExp the lifehack
roadagain
0
93
Other Decks in Programming
See All in Programming
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
680
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Ruby Parser progress report 2024
yui_knk
2
230
上手に付き合うコンポーネントテスト
quramy
1
230
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
290
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
620
オートマトン学習しろ / Do automata learning
makenowjust
3
130
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
55
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Become a Pro
speakerdeck
PRO
22
4.9k
Typedesign – Prime Four
hannesfritz
39
2.3k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Agile that works and the tools we love
rasmusluckow
327
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Designing the Hi-DPI Web
ddemaree
278
34k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
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
༧Ί༻ҙͨ͠ͷ͕ ͪ͜ΒʹͳΓ·͢
·ͱΊ • ϞδϡʔϧϞʔυ࠶ݱՄೳ • ͱ͍͏͔ॻ͍ͯͨΒຊՈίʔυͬΆ͔ͬͨ • ͬͱεϚʔτͳղܾ๏ͳ͍͔ͳ͋…
Α͍͜Ϛω͠ͳ͍ͰͶʂ