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

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)
},
},
and this is vuex mutations
export const mutations = {
mut_up_name(state,v){
state.item.name=v
},
and this code push obj to main array
add_item(state) {
let a={...state.item}
state.items.push(a)
},
how can i envoke connection between pushed state & 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);
},
},