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

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. Α͍͜͸Ϛω͠ͳ͍ͰͶʂ