Add option for authoring Vuex module

[DrSensor]

For authoring Vuex module there is kind of usage like:

• 1 page, many components
• multiple pages, multiple/single components on each page

To support that usage, in storybook implementation its need:

• Vue-router to support multiple pages
• Vue mixins to reduce many declarations of ...map{Vuex}

Vue Mixins

I also think of this template not also publishing vuex-modules but also vue-mixins that consist ...map{vuex} declarations. Something like:

mixins/mymodule.js

export default {
  computed: {
    ...mapGetters('mymodule', ['status', 'itemName'])
  },
  methods: {
     ...mapActions('mymodule', ['add', 'delete'])
  }
}

then in scenario use it like

<script>
import mymoduleMix from '../mixins/mymodule'
export default {
  mixins: [mymoduleMix]
}
</script>

Project Structure

When authoring vuex modules, the project structure need to support multiple .vue file in one scenario.

---

vue_router = false
-> 1 page, many components

Scenario1/
├── Component1.vue
├── Component2.vue
└── Layout.vue                // this is where Component1 and Component2 being use

---

vue_router = true
-> add addon storybook-router
-> multiple pages, multiple/single components on each page

Scenario1/
├── Layout1.vue
├── Layout2
│   ├── Component1.vue
│   ├── Component2.vue
│   └── Layout.vue
├── App.vue
└── routes.js

---

click 👍 if you agree!

👇