vuex-model-helper
Help you use vuex and v-model more happier
Installation
yarn add vuex-model-helper
# or by npm
npm install --save vuex-model-helperHow to use vuex-model-helper
- Use
mutationGenerator()to generate your v-model mutations
import Vuex from 'vuex';
import { mutationGenerator } from 'vuex-model-helper';
const mutations = {
...mutationGenerator([
'userName',
]),
};
const state = {
userName: '',
};
const store = new Vuex.Store({
mutations,
state,
});- In your *.vue file, call
computedGenerator()andmethodsGenerator()to generate computed object and mutation methods.
<template>
<div>
User Name:
<input
type="text"
v-model="userName"
>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
import {
computedGenerator,
methodsGenerator,
} from 'vuex-model-helper';
export default {
computed: {
...computedGenerator([
'userName',
]),
},
methods: {
...mapMutations([
...methodsGenerator([
'userName',
]),
]),
},
};
</script>- And then you can "change" your v-model and then trigger your mutation (CHANGE_USER_NAME).
