Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vanilla-icecream/vuex-bound
Vue two-way binding (v-model) for Vuex state and mutations.
https://github.com/vanilla-icecream/vuex-bound
vue vuex
Last synced: 3 days ago
JSON representation
Vue two-way binding (v-model) for Vuex state and mutations.
- Host: GitHub
- URL: https://github.com/vanilla-icecream/vuex-bound
- Owner: Vanilla-IceCream
- License: mit
- Created: 2018-02-20T09:32:30.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2022-12-07T10:29:57.000Z (almost 2 years ago)
- Last Synced: 2024-10-06T05:22:14.624Z (about 1 month ago)
- Topics: vue, vuex
- Language: JavaScript
- Homepage:
- Size: 1.53 MB
- Stars: 45
- Watchers: 3
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuex-bound [](https://travis-ci.org/Vanilla-IceCream/vuex-bound) [](https://coveralls.io/github/Vanilla-IceCream/vuex-bound?branch=main)
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
### Global
```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
{{ foo }}
{{ fooCustom }}
{{ barBaz }}
{{ mongo }}
import { mapModel } from 'vuex-bound';
export default {
computed: {
// your model
...mapModel(['foo']),
// equal to
...mapModel({ foo: state => state.foo }),
...mapModel({
// custom name
fooCustom: state => state.foo,
// nested object
barBaz: state => state.bar.baz,
// nested object with array
mongo: state => state.db[0].mongo,
}),
},
};
```
:warning: WARNING
Frankly, `state` is static, you cannot use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) and rename it because it will not be able to update the value.
### Modules
```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
{{ foo }}
{{ fooCustom }}
{{ barBaz }}
{{ mongo }}
import { mapModel } from 'vuex-bound';
export default {
computed: {
// your model
...mapModel('a/b', ['foo']),
// equal to
...mapModel('a/b', { foo: state => state.foo }),
...mapModel('a/b', {
// custom name
fooCustom: state => state.foo,
// nested object
barBaz: state => state.bar.baz,
// nested object with array
mongo: state => state.db[0].mongo,
}),
},
};
```
## API
### `mapModel`
Type: `mapModel(namespace?: string, map: Array | Object): Object`
### `updateModel`
Type: `updateModel(): Object`