Javascript Vue路由器和vuex问题，基于值重定向

我有一个Vue应用程序，我正在尝试让它在用户未付款且试用期结束时重定向到

/billing

，并显示一条错误消息。我还希望，如果他们已经支付或仍在试用期，他们可以使用该应用程序

my store.js中的storeUser代码

storeUser(state, user) {
      state.user = user
      state.isPaid = user.isPaid
      state.isTrial = user.isTrial
 },

作为“用户”传递到storeUser的数据

{
  name: "Joe",
  isPaid: false,
  isTrial: false
}

使用chrome vui扩展在我的vuex存储中显示的数据

{
  name: "Joe",
  isPaid: null,
  isTrial: null
}

不确定数据输入错误的原因，因为我可以在storeUser函数中记录正确的数据。但是，如果我查看用户部分，我可以将其视为正确的假值。当我尝试在下面的代码中为vue路由器指定此选项时，它会说它无法读取，因为它为null。我认为这只是一个异步问题

state in store.js

状态：{
令牌：null，
isPaid:null，
isTrial:null，
错误：{
注册表错误消息：“”，
loginErrorMessage:“”，
重置错误：“”
},
用户：空
}

main.js，其中包含我的vue路由器

}否则如果（to.path！='/billing'&&&！（store.state.isPaid&&store.state.isTrial））{
下一个({
路径：'/billings'，
查询：{
支付：假，
}
})

有人能发现一个潜在的问题或者我的问题的解决方案吗？这段代码应该足以重现这个问题，尽管如果缺少，我可以提供更多，没有公开回购来显示代码的其余部分

编辑** 所以奇怪的事情发生了。我现在看到了比以前更正确的数据（isPaid和isTrial是有效的），但是我现在仍然无法转到其他路线。 在每次开始之前添加store.state的输出

{
标记：“随机字符串”，
我说：是的，
isTrial:错，
错误：{}，
用户：{
姓名：“乔”，
我说：是的，
isTrial:错误
}
}

编辑2**

storeUser({commit, state}) {
      if(!state.token) return
      axios.get('/user/userInfo')
        .then(res => {
          if(res.data.success) {
            commit('storeUser', {
              name: res.data.user.name,
              isPaid: res.data.user.company.stripe.isPaid,
              isTrial: res.data.user.company.stripe.isTrial
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

编辑3** 这是我从main.js开始的整个vue路线

router.beforeEach((to, from, next) => {
  store.dispatch('tryAutoLogin')
  console.log(store.state) // this is test only not for prod
  if(!store.state.token && (to.path == '/login' 
    || to.path == '/signup' 
    || to.path == '/forgot' 
    || to.path == '/resend' 
    || to.path.includes('/confirmation/'))) 
  {
    return next()
  } else if (to.path == '/signup') {
    return next({ query: {plan: from.query.plan }})
  } else if(to.path != '/billing' && !(store.state.isPaid && store.state.isTrial)) {
    next({
      path: '/billing',
      query: {
         paid: false,
      }
  })
  } else if(store.state.token) {
    return next()
  } else {
    return next('/login')
  }
})

你可以看到我做了自动登录，只是检查是否有令牌存在。这与问题无关

编辑4**

我有一个想法，但不知道如何实现。使用承诺来确保数据是正确的。我对承诺部分的困惑是让它们一起工作。因此我认为

authUser

变异然后以某种方式使

storeUser

操作成为我可以在我的“以前”中解决的承诺

行动

tryAutoLogin({commit, dispatch}) {
   const token = localStorage.getItem('token')
   if(!token) {return}
   commit('authUser',{
     token
   })
   dispatch('storeUser')
},


storeUser({commit, state}) {
      if(!state.token) return
      axios.get('/user/userInfo')
        .then(res => {
          if(res.data.success) {
            commit('storeUser', {
              name: res.data.user.name,
              companyName: res.data.user.company.companyName,
              role: res.data.user.role,
              isPaid: res.data.user.company.stripe.isPaid,
              isTrial: res.data.user.company.stripe.isTrial
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

突变

authUser(state, userData) {
  state.token = userData.token
},
storeUser(state, user) {
  state.user = user
  state.isPaid = user.isPaid
  state.isTrial = user.isTrial
},

---

看起来你有很多重复和混乱的代码

为什么州里有两个

isPaid

和

isTrial

您也没有使用为

commit

函数提供的

name

属性

承诺

commit（'storeUser'{
名称：res.data.user.name，
isPaid:res.data.user.company.stripe.isPaid，
isTrial:res.data.user.company.stripe.isTrial
});

const store=新的Vuex.store({
声明：{
用户名：“”，
我说：错，
isTrial:错，
},
突变：{
storeUser（状态、数据）{
state.userName=data.name；
state.isPaid=data.isPaid；
state.isTrial=data.isTrial；
},
},
});

现在您可以访问state

store.state.isPaid

和

store.state.isTrial

---

您可以在这里看到一个工作示例。如果打开控制台，您可以看到当前状态是如何记录的。

错误具体指的是什么？是说无法读取store.state.x吗？如果您使用任何操作，您可以发布突变和动作的结构吗？@AlexanderStaroselsky只是说它无法读取

store.state.user

说它是空的，这是由我正在使用的chrome扩展插件备份的。Kay，你能从你正在做路由逻辑的地方控制日志存储并在你的问题中分享它吗？听起来很像，存储甚至没有状态属性，所以我很好奇，看看存储中到底有什么，然后可能是如何导入的/已定义。@JesusGalvan不确定您的意思？我正在使用的数据有很多，但只有我提供的数据真正涉及到我试图使用的数据。复制isPaid/isTrial的原因是我想看看用户

state.user

与否是否有区别。我可以删除第一个，但不能在用户下删除，因为这就是e数据是输入的。我理解访问存储的前提，我不认为这个副本会导致我的问题。至于使用名称和用户名，这只是我当时选择的，所以我并没有理由更改它，因为那个部分工作正常。似乎不起作用的是与状态相关的路由器内容。问题是我躺在我生命的每一部分之前code@joshk132你可以在这里看到一个工作示例，它似乎并没有解决本帖的主要内容“Beforeach”问题。我看到它显示了值的变化，我可以得到，有时-使用相同代码的奇数工作1/2次-但是路由器问题仍然存在。@joshk132状态可能不存在是否可用（取决于您如何设置初始状态）。这可能是一种竞争条件，其中检查在该状态加载之前完成。您可以延迟所有操作，直到加载初始状态。有点像旋转加载程序。如果没有实际代码，很难判断。创建一个JSFIDLE以了解您的实际行为，我可以看一看。我已经做了一些console.log语句，它看起来像e beforeach有点奇怪（可能不是，只是异步处理），因此，如果在beforeach的顶部放置一个console.log，它会显示状态。但是，如果我在else中放置isPaid和isTrial的console.log，如果我对它们进行求值，那么这两个值都会得到

null

。至于创建JSFIDLE，我认为如果不公开API，我无法做到这一点