如何调用推送状态和表单输入之间的连接

Question

我有一个表单，我使用v-model将其连接到computed，computed使用VueX中的get和set with object，当提交表单时，该对象将被推送到主数组中，问题是，即使在推送之后，表单输入和数组中被推送的对象之间的连接也不会断开，当提交新表单时，旧表单将发生变化

这是用文本输入进行v建模计算的

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

这就是vuex突变

export const mutations = {
mut_up_name(state,v){
state.item.name=v
},

该代码将obj推送到主阵列

add_item(state) {
let a={...state.item}
state.items.push(a)

},

如何在推送状态&输入

Answer 1

最好避免直接在vuex操作内部更改状态，如果您想更改输入的值，请使用@input并从那里调度您的操作。如果你想变异多个动作，那么你可以看看我的方法：

模板：

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

脚本：

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

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