Easy two-way binding between v-model and vuex #1084

[pschaub]

What problem does this feature solve?

Easy two-way binding between v-model and vuex state / mutations.

What does the proposed API look like?

For example I want to bind the state of the global menu to a vuex state.

Meanwhile I use this manual workaround in my component:

computed: {
  nav: {
    get () { return this.$store.state.nav },
    set (v) { this.$store.commit('SET_NAV', v) }
  }
}

It would be helpful to have an easy function like mapGetters to do this.

[manico]

I like the idea, just not sure if this is fit for inclusion in library or separate lib.
Here is an example, if it makes sense I can create PR and tests:
manico@1663b0e

[johnmerced-ks]

Looking forward for this! Has this been discussed to see if it should be part of the library or not?

[zurcacielos]

Here's a potential solution
https://github.com/maoberlehner/vuex-map-fields

[johnmerced-ks]

Any feedbacks yet?

[leodutra]

import { mapState } from 'vuex'

// based on article: 
// VueJS - Two way data binding and state management with Vuex and strict mode
// https://ypereirareis.github.io/blog/2017/04/25/vuejs-two-way-data-binding-state-management-vuex-strict-mode/

import { mapState } from 'vuex'

export default function mapStatesTwoWay (namespace, states, updateCb) {
    const mappedStates = mapState(namespace, states)
    const res = {}
    for (const key in mappedStates) {
        res[key] = {
            set (update) {
                updateCb.call(this, { [key]: update })
            },
            get () {
                return mappedStates[key].call(this)
            }
        }
    }
    return res
}

Sample usage:

computed: {
  ...mapStatesTwoWay('plan', {
    name: state => state.current.name,
    email: state => state.current.email,
    phone: state => state.current.phone,
    code: state => state.current.code
  }, function (stateUpdate) {
    // ex: value = { name: 'John' }  
    this.$store.commit('updateCurrent', value)
  })
}

state: {
  current: {
     name: '',
     email: '',
     phone: '',
     code: ''
  }
}
mutations: {
  updateCurrent(state, payload) {
    Object.assing(state.current, payload)
  }
}

Uses mapState under the hood for consistency and computed {set, get} to be compatible with v-model.

This works, but I expect an even leaner solution.

GIST

[Shyam-Chen]

I made a simple library.

https://github.com/Vanilla-IceCream/vuex-bound

[ibyteyou]

what about computed? why this question has no continuation?

i'm tryed analyse argument-cheapness, and drawed a conclusion that some one argument does not greatly affect performance, we can hope to progress?

[vladimir-chernenko]

You can try to disable strict, https://vuex.vuejs.org/en/strict.html

In strict mode, whenever Vuex state is mutated outside of mutation handlers, an error will be thrown.

if you are using nuxt: export const strict = false

[leodutra]

To disable strict mode is brute force and dirty coding. State MUST NOT be changed by direct value change.

[janpauldahlke]

anything on this?

[yarsky-tgz]

yet another solution for this issue, designed as standalone lib: https://github.com/yarsky-tgz/vuex-dot

i've patiently investigated libs, that are mentioned already at this topic, but was not satisfied with that solution's architecture quality, or simplicity of usage, and, in all cases, I was feeling a lack of flexibility.

Mine solution not only can be used in all usage cases of other mentioned solutions, but also It provides some own features, analogs for which i haven't met, like exposition or plain hook (dispatching actions - is just mine sugar for hook).

Using plain hook() you can inject commit, validation before commit, any other complex logic you want to be invoked on your properties change.

look usage examples, read tests, it's 100% covered, so tests exposes all features my tools have.

btw - it do not depends on vue or vuex even for testing, just only designed with vue on mind.
That's just getters-setters generator for nested structures with hook and expose abilities.

P.S. I have some more features on mind, which coming soon