Multiple getterTypes about vuex-map-fields HOT 12 CLOSED

Hey @jurgenbosch,

you're almost there, but 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/

from vuex-map-fields.

I think that's a pretty good Idea – I'm open for pull requests. See: #19

from vuex-map-fields.

Awesome! Thank you. Never thought of the destructor. I guess I was stuck at the array option ;)

from vuex-map-fields.

One more question ..

Is there a way to use module_name.store_name syntax in the template?
In the current setup it might happen that both modules contain a store for the title.

In the current situation I can only use it once.

from vuex-map-fields.

You can rename properties: https://github.com/maoberlehner/vuex-map-fields#rename-properties

from vuex-map-fields.

I've seen that solution but and I imagined prefixing everything but that doesn't feel like a nice solution because it would basically adding more work to rename all fields and makes it unnecessary complicated.

It tried something like;

export default {
        computed: {
            ...mapKitchenFields({
                kitchen: {
                    no_panels: 'no_panels',
                    plintm2: 'plintm2'
                }
            }),
            ...mapApplicantFields(['firstName', 'lastName'])
        },
    }

But this results in a error saying;

"TypeError: path.split is not a function"

Ideal would be to have something like:

const { mapFields: mapApplicantFields, prefix: 'applicant' } = createHelpers({
        getterType: 'getApplicantField',
        mutationType: 'updateApplicantField',
    });

And then use 'applicant.firstName' in the template instead of just 'firstName'.

from vuex-map-fields.

I might work on it myself the following days, but I can't guarantee that I have time.

from vuex-map-fields.

Hi @maoberlehner What if I have to use all the fields in the state more than once i.e using it in multiple components. How do I handle this situation?

For Example,

const { mapFields: mapKitchenFields } = createHelpers({
getterType: 'getKitchenField',
mutationType: 'updateKitchenField',
});
const { mapFields: mapApplicantFields } = createHelpers({
getterType: 'getApplicantField',
mutationType: 'updateApplicantField',
});

export default {
computed: {
...mapKitchenFields(['no_panels', 'firstName', 'lastName']),
...mapApplicantFields(['no_panels','firstName', 'lastName']),
},
}

In this case, there is no point in creating two constants when they have the same fields. If I am using it in more than two time I have to create more constants and repeat the existing code which I don't want to. It would be helpful if you can provide an example how to handle this.

from vuex-map-fields.

Hey @abhinukala Your example would not work, because the fields mapped with mapKitchenFields and mapApplicantFields have the same names. You'd have to rename the fields.

If you don't want to write the createHelpers() function multiple times with the same parameters, you could create a file like this:

// src/store/map-applicant-fields.js
export const { mapFields: mapApplicantFields } = createHelpers({
  getterType: 'getApplicantField',
  mutationType: 'updateApplicantField',
});

// in your component...
import { mapApplicantFields } from '../store/map-applicant-fields.js';

// ...

Or if you're using Vuex modules and assuming you have an applicant Vuex module you could use the module file to provide the mapFields helper function:

// src/store/modules/applicant.js

export const applicant = {
  state: {
  // ...
  },
  // ...
};

export const { mapFields: mapApplicantFields } = createHelpers({
  getterType: 'getApplicantField',
  mutationType: 'updateApplicantField',
});

I'm not quite sure tough if I understood your problem correctly, please provide more informations if I got it wrong :)

Thx.

from vuex-map-fields.

@maoberlehner. Thank you for your response. Let me put my question this way. I have an address component(which has line1, line2, city, state and zip fields) that will be reused in multiple other components like Title and Registration as a sub-component. Now when I fill the address in Title.vue, in my store I need to have this information saved in the state -> title object. Save for registration. So basically I need to differentiate where the address is coming from. Hope this makes my question clear.

from vuex-map-fields.

I wrote an article about reusable Vuex modules. In the article you can see, that the contact.js and address.js Vuex modules are reused. Is this close to what you want to achieve?

from vuex-map-fields.

Closing this as there has been no further feedback from @abhinukala

from vuex-map-fields.