vuex-model-helper
TypeScript icon, indicating that this package has built-in type declarations

0.1.1 • Public • Published

vuex-model-helper

travis-build-result

Help you use vuex and v-model more happier

How to use vuex-model-helper

  1. 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,
});
  1. In your *.vue file, call computedGenerator() and methodsGenerator() 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>
  1. And then you can "change" your v-model and then trigger your mutation (CHANGE_USER_NAME).

More example

Readme

Keywords

Package Sidebar

Install

npm i vuex-model-helper

Weekly Downloads

10

Version

0.1.1

License

ISC

Unpacked Size

5.98 kB

Total Files

4

Last publish

Collaborators

  • liaojimmy