Pro Yearly is on sale from $80 to $50! »

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

727d714103d1475e459bac77b656092e?s=47 Roadagain
November 21, 2019

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

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

727d714103d1475e459bac77b656092e?s=128

Roadagain

November 21, 2019
Tweet

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