Javascript 使用vue中vuex状态的数据填充输入字段

我的应用程序组件中有以下代码片段：

基本的







添加
去除


返回
下一个
从“vuex”导入{mapActions}；
导出默认值{
名称：“基础”，
数据（）{
返回{
基本知识：[{
姓名：“，
电子邮件：“
}]
};
},
方法：{
…映射操作（[“addBasicData”]），
addified（）{
这个。基本。推({
姓名：“，
电子邮件：“
});
},
removeField（索引）{
这是基础。拼接（索引，1）；
},
toNext（）{
this.addBasicATA（this.basics）；
这个.$router.push（{name:“Location”}）；
},
back（）{
这是。$router.back（）；
}
}
};

这种方法在某种程度上是有效的：

mounted（）{
//eslint禁用下一行无未使用的变量
让fromState=this.$store.state.Basics.Basics；
if（fromState）{
this.basics.name=fromState.name；
this.basics.email=fromState.email；
}
}

这种方法在某种程度上是有效的：

mounted（）{
//eslint禁用下一行无未使用的变量
让fromState=this.$store.state.Basics.Basics；
if（fromState）{
this.basics.name=fromState.name；
this.basics.email=fromState.email；
}
}

这只是你能做到的两个版本之一。 或者，您可以映射变异并在单击事件中直接调用它们。

“添加字段”按钮仅在循环之外有意义

AddBasicATA您不需要它

这只是你能做到的两个版本之一。 或者，您可以映射变异并在单击事件中直接调用它们。

“添加字段”按钮仅在循环之外有意义

---

AddBasicATA您不需要它

谢谢，伙计。如果我正在使用click event添加另一个带有索引的

name

和

email

输入字段，我该怎么做？索引是什么意思？我已经在上面的问题中更新了我的代码部分。哦，伙计，谢谢，这也减少了我的其他问题

computed:mapGetters（“getBasic”）

或

computed:mapGetters（{basic:“getBasic”}）

谢谢你，伙计。如果我正在使用click event添加另一个带有索引的

name

和

email

输入字段，我该怎么做？索引是什么意思？我已经在上面的问题中更新了我的代码部分。哦，伙计，谢谢，这也减少了我的其他问题

computed:mapGetters（“getBasic”）

或

computed:mapGetters（{basic:“getBasic”}）

<div v-for="(field, index) in basics" :key="index">
    <input v-model="basic.name" placeholder="Name" type="text">
    <input v-model="basic.email" placeholder="Email" type="email">
    <button @click.prevent="removeField(index)">Remove</button>
</div>
<hr/>
<button @click.prevent="addField">Add</button>
<br>
<button @click.prevent="back">Back</button>
<button @click.prevent="toNext">Next</button>

methods: {
    addField() {
        this.$store.commit('addBasic',{name:"",email:""} )
    },
    removeField(index) {
        this.$store.commit('removeField',index )
    },
    toNext() {
        this.$router.push({ name: "Location" });
    }
},
computed: {
    basic:{
        get() {
          return this.$store.getters.getBasic;
        }
     }
}

// ...
state: {
    basic:[{name:"Jonny",email:"jonny@mail.com"}, 
           {name:"Bonny",email:"Bonny@mail.com"}]
}
mutations: {
    addBasic(state,value) {
        state.basic.push(value)
    },
    removeField(state,index ){
        state.basic.splice(index,1);
    }
 }