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
1k
HL-Report コントラクト開発裏話 / Developing Contracts of HL-Report
roadagain
1
690
Rustでオブジェクト指向エクササイズやってみた / OOP exercise in Rust
roadagain
0
420
RegExp the lifehack
roadagain
0
120
Other Decks in Programming
See All in Programming
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Navigating Dependency Injection with Metro
zacsweers
3
230
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.2k
rage against annotate_predecessor
junk0612
0
160
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
640
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
320
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
830
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
130
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
120
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Documentation Writing (for coders)
carmenintech
74
5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A designer walks into a library…
pauljervisheath
207
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Optimizing for Happiness
mojombo
379
70k
Thoughts on Productivity
jonyablonski
70
4.8k
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
༧Ί༻ҙͨ͠ͷ͕ ͪ͜ΒʹͳΓ·͢
·ͱΊ • ϞδϡʔϧϞʔυ࠶ݱՄೳ • ͱ͍͏͔ॻ͍ͯͨΒຊՈίʔυͬΆ͔ͬͨ • ͬͱεϚʔτͳղܾ๏ͳ͍͔ͳ͋…
Α͍͜Ϛω͠ͳ͍ͰͶʂ