问题简介:
我想在提交一个表单的时候更新vuex里的一个hasEmail为true (这样可以设置在访问某些页面的时候查看hasEmail是否为true,否则redirect),但是结果却成了无限循环。
导致$router.push()
无法正常工作吗?
求解这个无限循环怎么破?
Form.vue
register() {
this.$store.dispatch('submitFormRequest', formData).then(response => {
this.$router.push({
name:'form.checkout',
params:{
'name': this.first_name + ', ' + this.last_name,
'address': this.address,
'email': this.email
}
})
})
}
SubmitForm.js
import * as types from './../mutation-type'
export default{
state : {
hasEmail: false
},
mutations:{
[types.SET_EMAIL](state) {
state.hasEmail = true
}
},
actions:{
submitFormRequest ({dispatch}, formData){
return axios.post('/api/form/register',formData).then(response => {
dispatch('setEmailRequest')
}).catch(error => {
console.log("submit error: ", error);
})
},
setEmailRequest({dispatch,commit}){
commit({
type: types.SET_EMAIL
})
},
}
}
Routes.js
{
path: '/checkout',
name: 'form.checkout',
props: true,
component: require('./components/form/StripeTemplate'),
meta:{ requiresProps: true }
}
.
.
.
if (to.meta.requiresProps) {
console.log("here: ", Store.state.SubmitForm.hasEmail)
if (Store.state.SubmitForm.hasEmail){
return next({name: 'form.checkout'});
}
return next({name: 'form'});
}
在routes.js里执行log,得到下面结果,最后导致app.js:21533 RangeError: Maximum call stack size exceeded
error:
@JellyBool 求助啊!