How to vjsf with vuex?

[floppiplopp]

I've grown very fond of vuex to manage my data and I was wondering if it is possible to use a vuex state as a model for vjsf. I usually two-way-bind a vuex-getter and -mutation as a computed getter/setter for a v-model, e.g.:

computed: {
  model: {
     get() {
        return this.$store.getters['namespace/getForm']
      },
      set(form) {
        this.$store.commit('namespace/SET_FORM', form)
      },
    },
}

I've read issue #150 and see that the model for vjsf does only work in data for good reasons, and the vuex model does not work (afaik) in data, only in computed. I can't think of an easy way around this, but I wanted to at least inquiry if I miss something, which I probably do.

tl;dr: Is there a reasonable way to combine the vjsf-model with a vuex state.

[albanm]

That is always the difficulty. You should not mutate vuex state directly, therefore passing a part of it directly to vjsf is not a good idea.

I am not certain, but I suppose the right thing to do would be for vjsf to clone the input value, mutate the clone then send it into the "input" event when changes occur. This way v-model would work, but it would also be possible to pass value (your getter) and listen to input (your setter) without the value being mutated.

Right now it is not done like this, and you have to implement the cloning yourself.

I will add this to the roadmap and work on it sometime (except if you are willing to prepare a pull request).

[floppiplopp]

Thank you for the extremely quick reply and the idea. I'll look into it, it's definitely something that'll make myself grow as a, well, somewhat semi-proficient coder of some sorts. I the unlikely case of me solving this, I'll get back to you with a pull request.

[JuliusJacobitz]

@albanm currently working on the same issue. Are there any updates yet, or is your proposed answer still the way to go?

[albanm]

In recent version vjsf does not mutate the model anymore (except if there is a bug). The model emitted in input events is a copy of the value.