how to retrieve and manipulate data from Vuex store - vuejs2

Question

I try to make door configurator using Vue.
First of all I put array of components from DB into Vuex store .get('/api/furnitura')
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.
What I found in Vue documentation is that it is possible to access Vuex store variables from each point of the application like that
computed: {
getFurnitura(){
return this.$store.state.furnitura.all
}
},
But I want to manipulate store variables in Vue.
Something like that
Take all from this.$store.state.furnitura.all where type=SOMETYPE and type=ANOTHERTYPE
For one calculator I want retrieve from this.$store.state.furnitura.all 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
<select name="hinge_selected" v-model="hinge_selected">
<option v-for="option in hinges" :value="option">
{{ option.name }}
</option>
</select>
<select name="handle_selected" v-model="handle_selected">
<option v-for="option in handles" :value="option">
{{ option.name }}
</option>
</select>
and so on
Here is my code now
resources\js\app.js
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("Vue ROOT instance mounted");
this.$store.dispatch('furnitura/getFurnitura');
}
});
resources\js\store\index.js
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
}
});
resources\js\store\modules\furnitura.js
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 => {
context.commit('SET_FURNITURA', response.data.records)
});
}
};
export default {
namespaced: true,
state,
getters,
mutations,
actions
};
resources\js\store\components\calculators\sliding-door.vue
<template>
<div>
<select name="hinge_selected" v-model="hinge_selected">
<option v-for="option in hinges" :value="option">
{{ option.name }}
</option>
</select>
<select name="handle_selected" v-model="handle_selected">
<option v-for="option in handles" :value="option">
{{ option.name }}
</option>
</select>
</div>
</template>
<script>
export default {
name: "SlidingDoorCalc",
data: function () {
return {
width: 600,
height: 2000,
hinge_selected: [],
handle_selected: [],
}
},
computed: {
getFurnitura(){
return this.$store.state.furnitura.all
}
},
methods: { },
mounted() { },
}
</script>

Answer 1

You can use regular component methods, as in:
{
// ...
methods: {
getHinges(filterParameter1, filterParameter2) {
// do your filtering and sorting on
// this.$store.state.furnitura.all
},
getHandles(filterParameter1) {
// same as with getHinges
}
}
}
Then, in your component, you call it as:
<select name="hinge_selected" v-model="hinge_selected">
<option v-for="option in getHinges('some_parameter')" :value="option">
{{ option.name }}
</option>
</select>
If you want to use the same filtering logic in multiple methods, use method-style-access Vuex getters, as in:
getters: {
// ...
getHinges: (state) => (filterParameter1, filterParameter2) => {
// filter your state.furnitura.all here
}
}
and call such getters in your component methods:
{
// ...
methods: {
getHinges(filterParameter1, filterParameter2) {
return this.$store.getters.getHinges(filterParameter1, filterParameter2);
},
}
}