maoberlehner / vuex-map-fields

Enable two-way data binding for form fields saved in a Vuex store
MIT License
1.42k stars 85 forks source link

[feature request] composition-api support #122

Open Steiger04 opened 3 years ago

Steiger04 commented 3 years ago

With vuex-composition-helpers you can do something like this:

import { useGetters, useActions } from 'vuex-composition-helpers';

export default {
  setup (props) {
    const { counter } = useGetters({
      counter: 'counter'
    })

    const { incrementCounter } = useActions({
      incrementCounter: 'incrementCounter'
    })

    return {
      counter,
      incrementCounter
    }
  }
}

Can you expand vuex-map-fields so that the following would be possible:

import { useFields } from 'vuex-map-fields-helpers';

export default {
  setup (props) {
    const { templateCounter } = useFields('myNamespace', {
      templateCounter: 'counter'
    })   

    return {
      templateCounter
    }
  }
}

And then templateCounter can be used with v-model in the template section. That would be a great feature.

geoidesic commented 3 years ago

@Steiger04 None of the contributors to this library are using composition yet. Looking at vuex-composition-helpers GitHub repo it looks like a small amount of quite simple code. If this feature is important to you, perhaps you'd consider implementing it and making a PR?

stevenmyhre commented 1 year ago
import store from "@/store";

export default function(namespace) {
  const updateField = function(options = {path, value}) {
    return store.commit(namespace + '/updateField', options);
  }
  return {updateField};
}

Usage:

const {updateField} = useVuexFields('myNamespace');

updateField({path: 'a.path.to.prop', value: 'yourvalue'});