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 / 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") 
}

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

1 个答案: