StorybookでモジュールモードのVuex storeを利用する / Use Modules mode Vuex store in Storybook

Yumemi.vue #3 LT登壇資料です

Transcript

1. StorybookͰ ϞδϡʔϧϞʔυͷVuex storeΛ ར༻͢Δ Roadagain
2. ࣗݾ঺հͷ༻ҙ͕ ؒʹ߹Θͳ͔ͬͨΒ TwitterΛ։͘εϥΠυ https://twitter.com/ringoh72
3. ࣗݾ঺հ Roadagain (Twitter: @ringoh72) גࣜձࣾϞόΠϧϑΝΫτϦʔ ࡢ೔10೥ͿΓʹࣃҩऀߦ͖·ͨ͠
4. ຊ୊
5. ͋ΔNuxt.jsͷϓϩδΣΫτͰ VuexΛ࢖͍࢝Ίͨ
6. ϞδϡʔϧϞʔυ • Nuxt.js͕ࣗಈͰVuex storeΛ࡞ΔϞʔυ • state, getters, actions, mutationsΛ ݸผͰexport͢Δ • σΟϨΫτϦߏ଄͕moduleʹͳΔ https://ja.nuxtjs.org/guide/vuex-store/#ϞδϡʔϧϞʔυ
7. ΫϥγοΫϞʔυ • Nuxt.jsͰैདྷͷVuex storeΛѻ͏Ϟʔυ • store/index.jsͰVuex storeΛexport͢Δ • Nuxt 3Ͱഇࢭ༧ఆ https://ja.nuxtjs.org/guide/vuex-store/#ΫϥγοΫϞʔυ
8. ͔ͤͬͩ͘͠ ϞδϡʔϧϞʔυͰ΍ͬͯΈ͍ͨ
9. ͦͯ͠Ϳ͔ͭΔ Storybookͷน
10. StorybookͷVuex • αϙʔτ͸͞Ε͍ͯΔ͕ѻ͍͕গ͠໘౗ • story಺ͰVuex storeͷΠϯελϯεΛ౉͢ ඞཁ͕͋Δ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
11. StorybookͷVuex • αϙʔτ͸͞Ε͍ͯΔ͕ѻ͍͕গ͠໘౗ • story಺ͰVuex storeͷΠϯελϯεΛ౉͢ ඞཁ͕͋Δ • ϞδϡʔϧϞʔυ…ແཧͰ͸ʁ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
12. ๚Εͨޫ໌ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
13. ๚Εͨޫ໌ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
14. require.context • webpack͕ఏڙ͢Δಛघͳrequire • σΟϨΫτϦ಺ͷϑΝΠϧ໊ΛҰׅऔಘ͠ɺ ͦͷ··require΋Ͱ͖Δ༏Ε΋ͷ https://webpack.js.org/guides/dependency-management/#requirecontext
15. ߟ͑ͨ͜ͱ require.contextͰϑΝΠϧ໊ΛऔಘͰ͖Δ “/“ ͷ༗ແͰ్த͔Ͳ͏͔൑அͰ͖Δ →͍͍ײ͡ʹ࠶ؼॻ͚͹͍͚ΔͷͰ͸ʁ
16. ࣮ࡍʹ΍ͬͯΈͨ
17. storybook-with-moduled-vuex
18. storeͷߏஙؔ਺
19. storeͷߏங
20. ಈ࡞આ໌
21. ಈ࡞આ໌ 1. require.contextͰϑΝΠϧ໊ΛҰׅऔಘ 2. ϑΝΠϧ໊͝ͱʹrequireͯ͠ ຤୺ϞδϡʔϧΛऔಘ 3. ϑΝΠϧ໊Λݟ֤ͯϞδϡʔϧΛ഑ஔ
22. “counter.js”͸຤୺ͳͷͰ ͦͷ··moduleʹͰ͖Δ counter: { namespaced: true, state, getters, actions, mutations }
23. ಈ࡞આ໌: ຤୅ͷ৔߹ Ϟδϡʔϧల։ͯ͠ऴΘΓ { counter: { namespaced: true, state, getters, actions, mutations } }
24. “form/text.js” ͸form͔Β ߋʹજͬͨmodule͕͋Δ form: { namespaced: true, module: { text: { namespaced: true, state, getters, actions, mutations } } }
25. ಈ࡞આ໌: ࢠ࣋ͪͷ৔߹ 1. ࣗ෼ͷkeyͱࢠͷkeyΛ෼ׂ “form/text.js” → “form” “text.js”
26. ಈ࡞આ໌: ࢠ࣋ͪͷ৔߹ 2. Vuex moduleͷ਽ܗΛ࡞Δ { parentKey: {
 namespaced: true, module: {} } }
27. ಈ࡞આ໌: ࢠ࣋ͪͷ৔߹ 3. ਽ܗΛ৽ͨͳrootͱͯ͠࠶ؼ { parentKey: {
 namespaced: true, module: {} // ͕͜͜৽͍͠root } }
28. ࣮͸Nuxt.js಺෦Ͱ΋ ࣅͨΑ͏ͳ࣮૷Λ͍ͯͨ͠ https://github.com/nuxt/nuxt.js/blob/838bacf/packages/vue-app/template/store.js
29. ༧Ί༻ҙͨ͠΋ͷ͕ ͪ͜ΒʹͳΓ·͢
30. ·ͱΊ • ϞδϡʔϧϞʔυ͸࠶ݱՄೳ • ͱ͍͏͔ॻ͍ͯͨΒຊՈίʔυͬΆ͔ͬͨ • ΋ͬͱεϚʔτͳղܾ๏ͳ͍͔ͳ͋…
31. Α͍͜͸Ϛω͠ͳ͍ͰͶʂ