Vuex-map-fields updating multiple stores through modules - vue.js

Question

I'm working Vuex modules to state my data.
I store the data in multiple modules to keep my code base nice and clean.
When using vuex-map-fields I have a situation where I'm using data from multiple modules.
There seems to be no method to do this or I am doing it wrong.
Below is my current code;
My component
<template>
<div class="">
<input type="text" v-model="no_panels"><br>
<input type="text" v-model="firstName"><br>
<router-link to="/step-2">Go to step 2</router-link>
</div>
</template>
<script>
import { createHelpers } from 'vuex-map-fields';
const { mapFields } = createHelpers({
getterType: [
'getKitchenField',
'getApplicantField',
],
mutationType: 'updateKitchenField',
});
export default {
computed: {
...mapFields(['no_panels', 'firstName', 'lastName'])
},
}
</script>
My store file
import kitchen from './kitchen';
import applicant from "./applicant";
export default {
modules: {
kitchen: kitchen,
applicant: applicant
},
strict: false
}
Applicant.js
import { createHelpers } from 'vuex-map-fields';
const { getApplicantField, updateApplicantField } = createHelpers({
getterType: 'getApplicantField',
mutationType: 'updateApplicantField',
});
export default {
state: {
firstName: '',
lastName: ''
},
getters: {
getApplicantField
},
mutations: {
updateApplicantField
}
}
The code above results in the following error:
Error in render: "TypeError: this.$store.getters[getterType] is not a function"

Answer 1

I'm the creator of vuex-map-fields, the Author asked the same question on GitHub:
Instead of passing multiple getters to createHelpers(), you can destructure and rename the return value of createHelpers() and call it twice.
const { mapFields: mapKitchenFields } = createHelpers({
getterType: 'getKitchenField',
mutationType: 'updateKitchenField',
});
const { mapFields: mapApplicantFields } = createHelpers({
getterType: 'getApplicantField',
mutationType: 'updateApplicantField',
});
export default {
computed: {
...mapKitchenFields(['no_panels']),
...mapApplicantFields(['firstName', 'lastName']),
},
}
If the desctructuring syntax is new to you, you can read more about it from Wes Bos: https://wesbos.com/destructuring-renaming/