vuex-map2way
two way state properties binding for v-model and any other usage (set\get methods generator)
Installation
npm i vuex-map2way
Usage
mapStateTwoWay(targetPath, actionName, propertyNames)
targetPath
dot-delimited path to your state property. dot-prop used for it
actionName
action used for value setting. If you pass array as propertyNames argument
it shall
propertyNames
name (string) or names (array of strings) of target object properties.
If you pass string as last argument - your action shall receive simple new value,
otherwise if array given your action shall receive it in 'patch' format:
{ propertyName: value }
Examples
1. Multiple properties of same object editing
In case you want to edit some properties of some complex object, for example this.$state.panel.currentUser
<template> <form> <input v-model="login"/> <input v-model="password"/> </form></template><script> import { mapStateTwoWay } from 'vuex-map2way'; export default { computed: { ...mapStateTwoWay('panel.currentUser', 'editUser', [ 'login', 'password' ]) } }</script>
Action handling that:
{ ;}
Mutation:
{ statepanelcurrentUser = Object; }
2. Simple property editing
In case you have one property. for example state.wizard.step
and simple setter action for it:
<template> <button @click.stop="step = ++step">next</button></template><script> import { mapStateTwoWay } from 'vuex-map2way'; export default { computed: { ...mapStateTwoWay('wizard', 'setWizardStep', 'step') } }</script>
Action:
{ ;}
Mutation:
{ Vue;}