Shortcut for multiple object properties

[molerat619]

Hey Markus,

would it make sense to allow to do the following?

computed: {
    ...mapFields(["myObject.*"]) // or simply "myObject"
}

Then in the form one can easily use v-model="myObject.title" etc. Right now, I find it a bit cumbersome/not scalable to have to add each field to that array in mapFields.

[maoberlehner]

I'll consider it, but I can't promise anything. Thank you for suggesting it.

[xlanex6]

@molerat619

• 1 on this feature, it could be very very cool.

[anikolaev]

@maoberlehner please consider this modification which implements the feature: anikolaev@fd0c1ad

Usage is almost the same as for multi-row (array) fields.

In *.vue:

<input v-model="selectedSeries.name"/>
<input v-model="selectedSeriesYAxis.name"/>

...

const mapSelectedSeriesFields = createHelpers({
  getterType: 'forms/getSelectedSeriesField',
  mutationType: 'forms/updateSelectedSeriesField'
}).mapObjectFields

...

export default {
  computed: {
    ...mapSelectedSeriesFields({
      selectedSeries: '*',
      selectedSeriesYAxis: 'y_axis.*',
    }),
  }

As you can see I used it to access data for selected series using specific getter and setter for that and storing selected series index in store too. That is one of the solutions for dynamic properties but it is another issue.

[maoberlehner]

@anikolaev thank you for providing a code example. I'll take a closer look at the weekend 👍

[stijnjanmaat]

Nice @anikolaev, using your fork for now :). Maybe useful for somebody: you need a getter like this

getNestedField: state => path => {
  if (path === '')
    return state.foo;

  return state.foo[path];
},

returning the whole foo object when path is empty. And a mutation like this:

updateNestedField(state, {path, value}) {
  state.foo[path] = value;
},

[anikolaev]

@stijnjanmaat It should work with library's getField() too:

    import { getField, updateField } from 'vuex-map-fields'

    getNestedField(state) {
      return getField(state.foo);
    },
...
    updateNestedField(state, field) {
      updateField(state.foo, field);
    },

[maoberlehner]

Hey all! Sorry for letting you wait – I just want to let you know that I've not forgotten about this. But I shifted my priorities to different projects for the last couple of weeks. I'll work on this as soon as I can free up some time.

Thank you for your patience!

[anikolaev]

@maoberlehner I understand you. I've also shifted project and the new one unfortunately doesn't use Vue. But I hope you will find time to improve this lib as I found it very useful for complex forms.

[zainulabidin302]

This is how I am using vuex-map-fields in my project. The object.* is working but in a slightly different way (without syntactic sugar).

import store from '../store/index.js';

const getObjectByDotNotation = (a, b) =>
  b.split('.')
    .reduce((prev, cur) => prev[cur], a);

const flatArray = a => [].concat.apply([], a);

const keysMapForVuexFieldMap = (a, prefix, join = '.') => {
  const keys = Object.keys(a);
  const objects = keys.filter(k => (
    typeof (a[k]) === 'object') && !(a[k] instanceof Array) && !(a[k] == null));
  const ctxPrefix = z => (prefix ? `${prefix}${join}${z}` : z);
  const fields = keys.filter(k => typeof (a[k]) !== 'object' || (a[k] instanceof Array) || (a[k] == null))
    .map(k => ctxPrefix(k));

  if (objects.length > 0) {
    const y = objects.map(b => keysMapForVuexFieldMap(a[b], ctxPrefix(b)));
    return flatArray(y)
      .concat(fields.map(a => a));
  }
  return fields;
};

function getMapFieldsList(x, prefix) {
  const a = getObjectByDotNotation(store(), x);
  return keysMapForVuexFieldMap(a, prefix || null);
}

export default getMapFieldsList;

getMapFieldsList will return a list of fields in the state object which can be passed to mapFields

...mapFields([...VuexMapFieldService('state.UserProfile.form', 'form'), 'form', 'loading', 'error']),
Every property in UserProfile.form (UserProfile is a namespaced module) object will be returned as an array (even nested properties)
e.g
[ 'form.first_name', 'form.address.address_line_1', 'form.passport.passport_no']

keysMapForVuexFieldMap is general enough to be applied on any object.
getMapFieldsList is a wrapper which will use store as well.

[ts-23]

Would it not be better just to do this to get the entire object?
...mapFields(["myObject"])

Adding an asterisk * introduces a new thing that is not needed.