title: how to retrieve and manipulate data from Vuex store
body: <p>I try to make door configurator using Vue.</p>
  <p>First of all I put array of components from DB into Vuex store <code>.get('/api/furnitura')</code>
  This gives me array with all components available for different type of doors.
  Hinges, handles, locks etc.
  And then I am going to have few Vue components. Each component is one configurator of specific door type.</p>
  <p>What I found in Vue documentation is that it is possible to access Vuex store variables from each point of the application like that</p>
  <pre><code>    computed: {
        getFurnitura(){
           return this.$store.state.furnitura.all
        }
      },
  </code></pre>
  <p>But I want to manipulate store variables in Vue.
  Something like that
  <code>Take all from this.$store.state.furnitura.all where type=SOMETYPE and type=ANOTHERTYPE</code></p>
  <p>For one calculator I want retrieve from <strong>this.$store.state.furnitura.all</strong> only few type of hinges and handles. For another something different.
  Then I want to use them in select fields. For example in DB I have about 50 hinges in DB and for one type of door I need to retrieve only 5, for another only 3 and so on.
  Having API call for every select field seems not reasonable for me</p>
  <pre><code>&lt;select name=&quot;hinge_selected&quot; v-model=&quot;hinge_selected&quot;&gt;
  &lt;option v-for=&quot;option in hinges&quot; :value=&quot;option&quot;&gt;
    {{ option.name }}
  &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name=&quot;handle_selected&quot; v-model=&quot;handle_selected&quot;&gt;
  &lt;option v-for=&quot;option in handles&quot; :value=&quot;option&quot;&gt;
    {{ option.name }}
  &lt;/option&gt;
  &lt;/select&gt;
  
  and so on
  </code></pre>
  <p>Here is my code now</p>
  <p><strong>resources\js\app.js</strong></p>
  <pre><code>window.axios = require('axios');
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  window.Vue = require('vue');
  import store from './store';
  Vue.component('modalform', require('./components/modalform.vue').default);
  Vue.component('calc-dush-door', require('./components/calculators/dush-door.vue').default);
  Vue.component('calc-interior-door', require('./components/calculators/interior-door.vue').default);
  Vue.component('calc-sliding-door', require('./components/calculators/sliding-door.vue').default);
  
  const app = new Vue({
      el: '#app',
      store,
      data: {    },
      directives: {   },
      computed: {
        getFurnitura(){
           return this.$store.state.furnitura.all
        }
      },
  
      methods: {   },
  
      mounted() {
          console.log(&quot;Vue ROOT instance mounted&quot;);
          this.$store.dispatch('furnitura/getFurnitura');
      }
  });
  </code></pre>
  <p><strong>resources\js\store\index.js</strong></p>
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  
  import furnitura from './modules/glass';
  import furnitura from './modules/furnitura';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    modules: {
      glass,
      furnitura
    }
  });
  </code></pre>
  <p><strong>resources\js\store\modules\furnitura.js</strong></p>
  <pre><code>import axios from 'axios';
  
  const state = {
    all: []
  };
   
  const getters = {  };
   
  const mutations = {
    SET_FURNITURA (state, furnitura) {
      state.all = furnitura;
    }
  };
  
  const actions = {
    getFurnitura (context) {
      axios
        .get('/api/furnitura') // this gives me result of Furnitura::all();
        .then(response =&gt; {
          context.commit('SET_FURNITURA', response.data.records)
        });
    }
  };
  
  export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
  };
  </code></pre>
  <p><strong>resources\js\store\components\calculators\sliding-door.vue</strong></p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;
  &lt;select name=&quot;hinge_selected&quot; v-model=&quot;hinge_selected&quot;&gt;
  &lt;option v-for=&quot;option in hinges&quot; :value=&quot;option&quot;&gt;
    {{ option.name }}
  &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name=&quot;handle_selected&quot; v-model=&quot;handle_selected&quot;&gt;
  &lt;option v-for=&quot;option in handles&quot; :value=&quot;option&quot;&gt;
    {{ option.name }}
  &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
      export default {
          name: &quot;SlidingDoorCalc&quot;,
  
          data: function () {
            return {
              width: 600,
              height: 2000,
              hinge_selected: [],
              handle_selected: [],
            }
          },
  
  
          computed: {     
            getFurnitura(){
               return this.$store.state.furnitura.all
            }
          },
  
          methods: {        },
          mounted() {        },
  
      }
  &lt;/script&gt;
  
  </code></pre>