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 Modules mode Vuex store in Storybook
Search
Roadagain
November 21, 2019
Programming
0
960
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
880
HL-Report コントラクト開発裏話 / Developing Contracts of HL-Report
roadagain
1
620
Rustでオブジェクト指向エクササイズやってみた / OOP exercise in Rust
roadagain
0
370
RegExp the lifehack
roadagain
0
92
Other Decks in Programming
See All in Programming
CSC307 Lecture 08
javiergs
PRO
0
330
小さな開発会社を作った理由
polidog
0
1.9k
유연한 Composable 설계
l2hyunwoo
0
380
Rust.Nagoya #1
codemountains
0
170
AHC035解説
terryu16
0
730
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
CSC307 Lecture 12
javiergs
PRO
0
220
生成AIをkintoneに連携してみた
hideg
0
230
Temporalを取り巻く仕様を整理する
sajikix
0
120
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Rails Girls Zürich Keynote
gr2m
93
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
The Language of Interfaces
destraynor
151
23k
Fireside Chat
paigeccino
25
2.8k
Embracing the Ebb and Flow
colly
81
4.3k
Gamification - CAS2011
davidbonilla
78
4.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
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
༧Ί༻ҙͨ͠ͷ͕ ͪ͜ΒʹͳΓ·͢
·ͱΊ • ϞδϡʔϧϞʔυ࠶ݱՄೳ • ͱ͍͏͔ॻ͍ͯͨΒຊՈίʔυͬΆ͔ͬͨ • ͬͱεϚʔτͳղܾ๏ͳ͍͔ͳ͋…
Α͍͜Ϛω͠ͳ͍ͰͶʂ