Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ikenfin/vuex-models
Simple two-way data binding between vue components and vuex store
https://github.com/ikenfin/vuex-models
v-model vue2 vuex vuex-models vuex-store
Last synced: 2 months ago
JSON representation
Simple two-way data binding between vue components and vuex store
- Host: GitHub
- URL: https://github.com/ikenfin/vuex-models
- Owner: ikenfin
- License: mit
- Created: 2018-07-06T13:12:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-05T09:28:39.000Z (11 months ago)
- Last Synced: 2024-08-10T09:13:27.812Z (5 months ago)
- Topics: v-model, vue2, vuex, vuex-models, vuex-store
- Language: JavaScript
- Homepage:
- Size: 427 KB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuex-models
This package is aims to simplify `v-model` usage with your vuex state, by providing `getter/action/mutation/state` generator and mapper, that generates `v-model` compatible computed properties.
It is compatible with Vue 2.x
## Installation
Just use npm:
`npm i --save vuex-models`
## Usage
Using vuex-models is a dead simple - first you need to generate store fields like this:
```js
// your imports
import { genVuexModels } from "vuex-models";
// Vue.use(Vuex), etc
/*
First argument is an array of generated field names
Second optional argument - state attribute name,
where generated fields will be stored their states
*/
// models with initial state values
const models = genVuexModels(
{
foo: "defaultValueForFoo",
bar: "defaultValueForBar",
},
"customField"
); // By default: Vxm
const store = new Vuex.Store({
...models,
});
/*
Vuex state becomes to:
{
customField: {
foo: 'defaultValueForFoo',
bar: 'defaultValueForBar'
}
}
*/
export default store;
```
Then, in your vue components you can map computed properties by using `mapVuexModels`:
```js
import { mapVuexModels } from "vuex-models";
export default {
computed: {
/*
creating computed properties:
foo: {
get () { return this.$store.getters.autogeneratedGetterFoo },
set (val) { this.$store.dispatch('autogeneratedAction', val) }
}
so, from now, you can safely use `foo` in v-model directives
*/
...mapVuexModels(["foo", "bar"]),
},
};
```
## Vuex namespaced stores
Also you can use `vuex-models` for namespaced vuex modules. All you need is to pass second argument to `mapVuexModels` with namespace name:
```js
// for example we have store module namespaced with 'MyNamespacedModule'
/*
const store = new Vuex.Store({
modules: {
MyNamespacedModule: {
namespaced: true,
...genVuexModels({
foo: 'value'
})
}
}
})
*/
export default {
computed: {
...mapVuexModels(["foo"], "MyNamespacedModule"),
},
};
```
## Rename computed properties
Like vuex mappers, mapVuexModels supports properties renaming:
```js
export default {
computed: {
// this.myFoo responds to store.foo model
...mapVuexModels({
myFoo: "foo",
}),
},
};
```