DEV Community

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

Collapse
 
brihaspati profile image
Brihaspati Bharani

Nice article Milad,
I just wanted to know your opinion about bringing the Vuex at molecules level? As molecules are application specific and they are the ones which combines atoms and make something meaningful like a header, wouldn't it be a good idea to pull in data from Vuex at molecules level? Otherwise if there is a change in one state parameter, the page has to cascade the new value down to the molecules/atoms all the way down?

Collapse
 
miladalizadeh profile image
Milad Alizadeh

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.