vue.js - how to invoke connection between pushed state and form input

Question

I have a form and i use v-model for that to connect it to computed , and computed use get and set with object in VueX , when form is submitted that object will pushed into main array , the problem is that , even after push the connection between form input and pushed object in array will not disconnect and when new form submited the old will change ,

this is computed that v-modeled whith text input

  computed: {
    name: {
      get() {
        return this.$store.state.item.name
      },
      set(value) {
        this.$store.commit('mut_up_name', value)
      },
    },

question from:https://stackoverflow.com/questions/65599178/how-to-invoke-connection-between-pushed-state-and-form-input

Answer 1

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);
  },
},