Vuex: V-model directive with computed properties.

[amanpatel]

I'm new to the flux pattern. Since components are not supposed to mutate state directly. How would a component designer use v-model directive easily within their app?

[yyx990803]

See the form handling section: http://vuex.vuejs.org/en/forms.html

[airtonix]

@yyx990803 that explains box fields (text/number/date/etc) form fields, but not select,radio or checkbox.

<label for="animalDogs">Dags</label>
<input type="radio"
       id="animalDogs"
       name="animal"
       value="dogs"
       :checked="animal === 'dogs'"
       @change="setAnimal">

<select name="animal" 
        @change="setAnimal">
  <option value="dogs"
          :selected="animal === 'dogs'">Dags</option>
  <option value="cats"
          :selected="animal === 'cats'">Cats</option>
</select>

import store from 'app/store';

export default {
  computed: {
    animal () {
       return store.state.animal;
    }
  },
  methods: {
    setAnimal: (type) {
      store.actions.setAnimal(type);
    }
  }
}

Is this about right?

[airtonix]

nevermind, using this instead:
https://github.com/vuejs/vuex/issues/38

[PrimozRome]

@airtonix can you post your exact solution with checkboxes/radio buttons please?

[canmihci]

really, is there something up with checboxes and radio yet?

[yarsky-tgz]

You can use https://github.com/yarsky-tgz/vuex-dot for full support of reactive changes on vuex. Checkboxes work too, sure )

Example of simple value changing through incrementing\decrementing:

<template>
  <button @click.stop="step--">back</button>
  <button @click.stop="step++">next</button>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      step: takeState('wizard.step') 
        .commit('setWizardStep')
        .map()
    }
  }
</script>

store/index.js

export default new Vuex.Store({
  state: {
    wizard: {
      step: 1
    }
  },
  mutations: {
    setWizardStep(state, step) {
      state.wizard.step = step;
    }
  }
});