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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. ຊ୊
   

   View Slide

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

   View Slide

6. ϞδϡʔϧϞʔυ
   • Nuxt.js͕ࣗಈͰVuex storeΛ࡞ΔϞʔυ
   • state, getters, actions, mutationsΛ
   ݸผͰexport͢Δ
   • σΟϨΫτϦߏ଄͕moduleʹͳΔ
   https://ja.nuxtjs.org/guide/vuex-store/#ϞδϡʔϧϞʔυ
   

   View Slide

7. ΫϥγοΫϞʔυ
   • Nuxt.jsͰैདྷͷVuex storeΛѻ͏Ϟʔυ
   • store/index.jsͰVuex storeΛexport͢Δ
   • Nuxt 3Ͱഇࢭ༧ఆ
   https://ja.nuxtjs.org/guide/vuex-store/#ΫϥγοΫϞʔυ
   

   View Slide

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

   View Slide

9. ͦͯ͠Ϳ͔ͭΔ
   Storybookͷน
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. ࣮ࡍʹ΍ͬͯΈͨ
    

    View Slide

17. storybook-with-moduled-vuex
    

    View Slide

18. storeͷߏஙؔ਺
    

    View Slide

19. storeͷߏங
    

    View Slide

20. ಈ࡞આ໌
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    namespaced: true,
    module: {}
    }
    }
    

    View Slide

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

    namespaced: true,
    module: {} // ͕͜͜৽͍͠root
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide