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

Transcript

1. 1.

   StorybookͰ ϞδϡʔϧϞʔυͷVuex storeΛ ར༻͢Δ Roadagain

2. 2.

   ࣗݾ঺հͷ༻ҙ͕ ؒʹ߹Θͳ͔ͬͨΒ TwitterΛ։͘εϥΠυ https://twitter.com/ringoh72

3. 3.

   ࣗݾ঺հ Roadagain (Twitter: @ringoh72) גࣜձࣾϞόΠϧϑΝΫτϦʔ ࡢ೔10೥ͿΓʹࣃҩऀߦ͖·ͨ͠

4. 4.

   ຊ୊

5. 5.

   ͋ΔNuxt.jsͷϓϩδΣΫτͰ VuexΛ࢖͍࢝Ίͨ

6. 6.

   ϞδϡʔϧϞʔυ • Nuxt.js͕ࣗಈͰVuex storeΛ࡞ΔϞʔυ • state, getters, actions, mutationsΛ ݸผͰexport͢Δ

   • σΟϨΫτϦߏ଄͕moduleʹͳΔ https://ja.nuxtjs.org/guide/vuex-store/#ϞδϡʔϧϞʔυ
7. 7.

   ΫϥγοΫϞʔυ • Nuxt.jsͰैདྷͷVuex storeΛѻ͏Ϟʔυ • store/index.jsͰVuex storeΛexport͢Δ • Nuxt 3Ͱഇࢭ༧ఆ

   https://ja.nuxtjs.org/guide/vuex-store/#ΫϥγοΫϞʔυ
8. 8.

   ͔ͤͬͩ͘͠ ϞδϡʔϧϞʔυͰ΍ͬͯΈ͍ͨ

9. 9.

   ͦͯ͠Ϳ͔ͭΔ Storybookͷน

10. 10.

    StorybookͷVuex • αϙʔτ͸͞Ε͍ͯΔ͕ѻ͍͕গ͠໘౗ • story಺ͰVuex storeͷΠϯελϯεΛ౉͢ ඞཁ͕͋Δ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file

11. 11.

    StorybookͷVuex • αϙʔτ͸͞Ε͍ͯΔ͕ѻ͍͕গ͠໘౗ • story಺ͰVuex storeͷΠϯελϯεΛ౉͢ ඞཁ͕͋Δ • ϞδϡʔϧϞʔυ…ແཧͰ͸ʁ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file

12. 12.

    ๚Εͨޫ໌ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file

13. 13.

    ๚Εͨޫ໌ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file

14. 14.

    require.context • webpack͕ఏڙ͢Δಛघͳrequire • σΟϨΫτϦ಺ͷϑΝΠϧ໊ΛҰׅऔಘ͠ɺ ͦͷ··require΋Ͱ͖Δ༏Ε΋ͷ https://webpack.js.org/guides/dependency-management/#requirecontext

15. 15.

    ߟ͑ͨ͜ͱ require.contextͰϑΝΠϧ໊ΛऔಘͰ͖Δ “/“ ͷ༗ແͰ్த͔Ͳ͏͔൑அͰ͖Δ →͍͍ײ͡ʹ࠶ؼॻ͚͹͍͚ΔͷͰ͸ʁ

16. 16.

    ࣮ࡍʹ΍ͬͯΈͨ

17. 17.

    storybook-with-moduled-vuex

18. 18.

    storeͷߏஙؔ਺

19. 19.

    storeͷߏங

20. 20.

    ಈ࡞આ໌

21. 21.

    ಈ࡞આ໌ 1. require.contextͰϑΝΠϧ໊ΛҰׅऔಘ 2. ϑΝΠϧ໊͝ͱʹrequireͯ͠ ຤୺ϞδϡʔϧΛऔಘ 3. ϑΝΠϧ໊Λݟ֤ͯϞδϡʔϧΛ഑ஔ

22. 22.

    “counter.js”͸຤୺ͳͷͰ ͦͷ··moduleʹͰ͖Δ counter: { namespaced: true, state, getters, actions, mutations

    }
23. 23.

    ಈ࡞આ໌: ຤୅ͷ৔߹ Ϟδϡʔϧల։ͯ͠ऴΘΓ { counter: { namespaced: true, state, getters,

    actions, mutations } }
24. 24.

    “form/text.js” ͸form͔Β ߋʹજͬͨmodule͕͋Δ form: { namespaced: true, module: { text:

    { namespaced: true, state, getters, actions, mutations } } }
25. 25.

    ಈ࡞આ໌: ࢠ࣋ͪͷ৔߹ 1. ࣗ෼ͷkeyͱࢠͷkeyΛ෼ׂ “form/text.js” → “form” “text.js”

26. 26.

    ಈ࡞આ໌: ࢠ࣋ͪͷ৔߹ 2. Vuex moduleͷ਽ܗΛ࡞Δ { parentKey: {
 namespaced: true,

    module: {} } }
27. 27.

    ಈ࡞આ໌: ࢠ࣋ͪͷ৔߹ 3. ਽ܗΛ৽ͨͳrootͱͯ͠࠶ؼ { parentKey: {
 namespaced: true, module:

    {} // ͕͜͜৽͍͠root } }
28. 28.

    ࣮͸Nuxt.js಺෦Ͱ΋ ࣅͨΑ͏ͳ࣮૷Λ͍ͯͨ͠ https://github.com/nuxt/nuxt.js/blob/838bacf/packages/vue-app/template/store.js

29. 29.

    ༧Ί༻ҙͨ͠΋ͷ͕ ͪ͜ΒʹͳΓ·͢

30. 30.

    ·ͱΊ • ϞδϡʔϧϞʔυ͸࠶ݱՄೳ • ͱ͍͏͔ॻ͍ͯͨΒຊՈίʔυͬΆ͔ͬͨ • ΋ͬͱεϚʔτͳղܾ๏ͳ͍͔ͳ͋…

31. 31.

    Α͍͜͸Ϛω͠ͳ͍ͰͶʂ