vuex $router push 出了问题

问题简介:
我想在提交一个表单的时候更新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 求助啊!

if (to.meta.requiresProps) {
    console.log("here: ", Store.state.SubmitForm.hasEmail)
    if (Store.state.SubmitForm.hasEmail){
        return next({name: 'form.checkout'});
    }

就是这个问题吧:hasEmail 为 true ,走 {name: 'form.checkout'} ,然后 to.meta.requiresProps 又走一遍,就这样循环啊

JellyBool
修改的评论也不能少于六个字哦!
不了了了了了之 回复 JellyBool
修改的评论也不能少于六个字哦!
不了了了了了之 回复 JellyBool
修改的评论也不能少于六个字哦!