[Vuejs]-How to invoke connection between pushed state and form input

by

0👍

It is better to avoid changing the state directly inside of vuex actions and if you would like to change the value of the input, use @input instead and dispatch your actions from there. If you would like mutate multiple actions, then you can take a look from my approach:

Template:

<template>
  <some-input-component :value="name" @input="inputHandler($event)"/>
</template>

Script:

computed: {
  name() {
    return this.$store.state.item.name;
  },
},
methods: {
  inputHandler(e) {
    this.$store.dispatch('add_item', e);
  },
},

in the vuex:

state: {
  item: {
    name: '',
  },
  someArray: [],
},
actions: {
  add_item: ({ commit }, e) => {
    commit('mutate_name', e);
    commit('push_item', e);
  }
},
mutations: {
  mutate_name: (state, value) => {
    state.item.name = value;
  },
  push_item: (state, obj) => {
    state.someArray.push(obj);
  },
},

Leave a comment