DEV Community

Discussion on: Vue CLI 3.0 plugin for creating apps using Atomic Design & Storybook

Collapse
miladalizadeh profile image
Milad Alizadeh Author

Sorry for the very late reply. I totally missed this comment. Anyway if it's still useful here is my answer:
I understand your point of bringing the the Vuex to a lower level such as molecules. I'd argue the molecules are still two small to connect to Store and should use event emitters instead to communicate with parent (Organism) component. This makes it easy to share these components between projects and then use Organism to connect to Store. something like a header or a search bar.

// Organisms/SearchBar

<template>
  <div class="v-o-search-bar">
    // molecule components
    <SearchForm @submitted="handleSearch" />
    <SearchResults :results="$store.state.search.results" />
  </div>
</template>

export default {
  methods: {
    handleSearch () {
      this.$store.dispatch('search/fetchResults')
    }
  }
}

I should also add that having the above structure is advisable because it decouple the business logic and UI.