vuex-bound  

Vue two-way binding (v-model) for Vuex state and mutations.

Installation and Usage

``bash
$ npm i vuex-bound -S


or

$ pnpm i vuex-bound -S

or

$ yarn add vuex-bound
`

`js
// for commonjs
const { mapModel, updateModel } = require('vuex-bound');

// for es modules
import { mapModel, updateModel } from 'vuex-bound';
`

Getting Started

$3

`js
/**
* Vuex 3
*/
import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import { updateModel } from 'vuex-bound';

Vue.use(Vuex);

const store = new Vuex.Store({
state: {
foo: '',
bar: { baz: '' },
db: [
{ mongo: '3' },
],
},
getters: {},
mutations: { ...updateModel() },
actions: {},
plugins: [createLogger({ collapsed: false })],
});

export default store;

/**
* Vuex 4
*/
import { createStore, createLogger } from 'vuex';
import { updateModel } from 'vuex-bound';

export const store = createStore({
state: {
foo: '',
bar: { baz: '' },
db: [
{ mongo: '3' },
],
},
getters: {},
mutations: { ...updateModel() },
actions: {},
plugins: [createLogger({ collapsed: false })],
});
`

`html



`

:warning: WARNING

Frankly, state is static, you cannot use destructuring assignment and rename it because it will not be able to update the value.

$3

`js
/**
* Vuex 3
*/
import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import { updateModel } from 'vuex-bound';

Vue.use(Vuex);

const store = new Vuex.Store({
modules: {
a: {
namespaced: true,
modules: {
b: {
namespaced: true,
state: {
foo: '',
bar: { baz: '' },
db: [
{ mongo: '3' },
],
},
actions: {},
mutations: { ...updateModel() },
getters: {},
},
},
},
},
plugins: [createLogger({ collapsed: false })],
});

export default store;

/**
* Vuex 4
*/
import { createStore, createLogger } from 'vuex';
import { updateModel } from 'vuex-bound';

export const store = createStore({
modules: {
a: {
namespaced: true,
modules: {
b: {
namespaced: true,
state: {
foo: '',
bar: { baz: '' },
db: [
{ mongo: '3' },
],
},
actions: {},
mutations: { ...updateModel() },
getters: {},
},
},
},
},
plugins: [createLogger({ collapsed: false })],
});
`

`html



`

API

$3

Type: mapModel(namespace?: string, map: Array | Object): Object

$3

Type: updateModel(): Object`