Vue.js - 从 Vuex Store 的突变内部控制路由器

Question

我有以下问题：

这是我的突变之一：

tryAutoLogin(state) {
  console.log("Trying auto login...");
  const token = window.localStorage.getItem("token");
  if (!token) {
    return;
  }
  const expirationDate = window.localStorage.getItem("token_exp");
  const now = new Date();
  if (now >= expirationDate) {
    return;
  }
  state.userData.loggedIn = true;
  state.userData.username = token.identity;
  // desired: this.$router.push("/dashboard") => results in undefined
}

目前我在组件的创建阶段在组件内提交了这个突变：

  created() {
    this.$store.commit("tryAutoLogin");
    this.$router.push("/dashboard");
  }

这不是一个好方法，因为我必须输出一个值，将它存储在一个变量中，然后使用 if/else 来处理这个this.$router.push("/dashboard")。

我怎样才能优雅地解决这个问题？在 // desired 评论中的突变内部是有利的。有没有办法访问Vuex商店里面的路由器？

Answer 1

将 vue 组件实例传递给突变，如：

 this.$store.commit("tryAutoLogin",this);
 

在突变中将其添加为参数vm，然后将其用作vm.$router.push("/dashboard") ：

tryAutoLogin(state,vm) {
  console.log("Trying auto login...");
  const token = window.localStorage.getItem("token");
  if (!token) {
    return;
  }
  const expirationDate = window.localStorage.getItem("token_exp");
  const now = new Date();
  if (now >= expirationDate) {
    return;
  }
  state.userData.loggedIn = true;
  state.userData.username = token.identity;
  vm.$router.push("/dashboard") 
}