title: Vuex - changing value based on component's current index and passing the value to other components
body: <p>I have hit a wall and cannot get over it without your help now. I've spent a good few days trying to get my head around mutations and actions but this particular case I have doesn't seem to apply to tutorials online, also the answers on here are for different scenarios to mine. So here goes:</p>
  
  <p>Setup:
  - Project is using vuex and store for data and state management
  - Currently App.vue has two child components: PizzaGenerator.vue and BaseButtons.vue</p>
  
  <p>I am trying to achieve this:
  - When I click on a specific button in BaseButtons.vue I need a centrally managed showBaseIndex to be assigned an index value. This value is then available to the other, PizzaGenerator.vue, component which will reflect the change and show a layer that matches the new value of showBaseIndex.</p>
  
  <p>Please see all the two components and store below. </p>
  
  <p>Can you help me head in the right direction?</p>
  
  <p>PizzaGenerator.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="pizza-generator section" id="screen3" data-anchor="screenThree"&gt;
      &lt;ul class="pizza-layers"&gt;
          &lt;!-- Display pizzas --&gt;
          &lt;li v-for="(item, index) in getBase" class="pizza-canvas pizza-canvas--base" v-bind:class="item.class"  v-if="$store.state.showBaseIndex == index"&gt;&lt;/li&gt;
          &lt;!-- END Display pizzas --&gt;
      &lt;/ul&gt;
  
      &lt;div class="pizza-items"&gt;
          &lt;app-base-buttons&gt;&lt;/app-base-buttons&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Base from './pizza-buttons/BaseButtons'
  import { mapGetters, mapActions } from 'vuex'
  
  export default {
  components: {
      appBaseButtons: Base
  },
  computed: {
      getBase(){
          return this.$store.state.base
      }
  },
  methods: mapActions([
      'baseLayer',
  ]),
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>BaseButtons.vue</p>
  
  <pre><code>   &lt;div class="pizza-items-selector pizza-items-selector--dough"&gt;
      &lt;div class="pizza-items-selector__items pizza-items-selector__items--dough"&gt;
          &lt;div class="sliding-buttons"&gt;
              &lt;button v-for="(item, index) in getBase" class="sliding-buttons__button dough-button" :key="index" @click="baseLayer = index"&gt; {{ item.name }}&lt;/button&gt;
          &lt;/div&gt;
          &lt;button class="buttons-prev-1 prev"&gt;prev&lt;/button&gt;
          &lt;button class="buttons-next-1 next"&gt;next&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  import { mapActions, mapMutations } from 'vuex'
  export default {
  computed:{ 
      getBase(){
          return this.$store.state.base
      },
  },
  methods:{ 
      ...mapMutations([
          'baseLayer',
      ]),
      baseLayerIndex() {
          this.$store.commit('baseLayer');
      }
  },  
  </code></pre>
  
  <p>}
  </p>
  
  <p>store.js</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export const store = new Vuex.Store({
  state: {
      showBaseIndex: 1,
      base : [
          { name: 'Dünner Italienisch', class: 'pizza-canvas--base-italienisch', id: 1 },
          { name: 'Dünner Italienisch - Vollkorn', class: 'pizza-canvas--base-italienisch--vollkorn', id: 2 },
          { name: 'Dicker Amerikanisch', class: 'pizza-canvas--base-amerikanisch', id: 3 },
          { name: 'Dicker Amerikanisch / Chili-Käse-Rand', class: 'pizza-canvas--base-amerikanisch--chilli-kaese-rand', id: 4 },
          { name: 'Dicker Amerikanisch / Käse-Rand', class: 'pizza-canvas--base-amerikanisch--kaese-rand', id: 5 }
      ],
  },
  getters: {
      //
  },
  mutations: {
      baseLayer (state){
          state.showBaseIndex
      }
  }, 
  });
  export default store;
  </code></pre>