title: Structuring the state in a Vuex Store
body: <p>I recently started learning Vuex and I would like to have some insight on how to properly structure the state of a Vuex/Flux-like stores</p>
  
  <p>Lets take a look at the example below</p>
  
  <pre><code>ProductStore
  
  state: {
    name: 'some name',
    price: 'some price',
    variants: [],
    selectedVariant: {},
  }
  
  mutations: {
    [ADD_VARIANT] (state, newVariant) {
      state.variants.push(newVariant)
    }
  
    [DELETE_VARIANT] (state, deletedId) {
      state.variants = _.filter(state.variants, c =&gt; c.id == deleteID )
    }
  
    [EDIT_VARIANT] (state, editedComment) {
      //...
    }
  
    [EDIT_SELECTED_VARIANT_TYPE] (state, variantType) {
      state.selectedVariant.type = variantType
    }
  }
  </code></pre>
  
  <p>How do you structure states in instances like the one above when you have a parentComponent of sorts(the <code>Product</code>) and you have to manage childComponent states as well(the <code>Variant</code>).</p>
  
  <p>In my specific instance, I have a <code>ProductPage</code>. In it, I have a <code>VariantTable</code>. Selecting an item in the <code>VariantTable</code> brings up a <code>VariantModal</code> that lets you edit variant attributes which should propagate to the parent table.</p>