我在登录页面上有一个表格。然后将参数发送给vuex actions
。单击submit
按钮,然后按需要将我推到下一页时,它可以正常工作。但是有一个缺陷。当我打开页面或刷新页面时。它是自动提交参数的,我不知道为什么?
模板
<form class="flexbox" @submit.prevent="submit" method="post">
<keyword-filter />
<div class="seperator"></div>
<city-filter />
<submit-btn />
</form>
脚本
created(){
this.$store.dispatch("bridalApi", {
input: this.formItems,
});
},
methods: {
submit(){
this.$store.dispatch("bridalApi", {
input:this.formItems
})
.then(this.$router.push('home'));
},
},
computed: {
formItems(){
let paramObj = {
keyword: this.$store.state.bridal.keyword,
city: this.$store.state.bridal.city,
price: this.$store.state.bridal.price,
people: this.$store.state.bridal.people,
rank: this.$store.state.bridal.rank,
sort: this.$store.state.bridal.sort,
}
return paramObj;
},
}
此外,当我刷新页面或进入页面时,它会发送参数(我不想要这样)。但这不会把我发送到下一页吗?我不太确定为什么要自动提交params?
答案 0 :(得分:3)
我认为问题在这里
created(){
this.$store.dispatch("bridalApi", {
input: this.formItems,
});
},
已创建钩子可用于在创建实例后运行代码,因此,每当您重新加载页面时,都会创建该组件,并会触发商店中的操作。 查看https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram了解更多信息。
希望有帮助!