如何从 Vue Pinia 商店中的操作导航到另一条路线？答案

【问题标题】：How can I navigate to another route from actions in Vue's Pinia store?如何从 Vue Pinia 商店中的操作导航到另一条路线？
【发布时间】：2022-07-18 20:03:48
【问题描述】：

我目前正在从事 Vue 3 项目。

在 Pinia 商店中使用 this.$router.push({}) 似乎不起作用。

我也尝试过导入 useRouter --> import { useRouter } from "vue-router"; 来简单地使用 router.push，但似乎仍然没有任何效果。

我不知道可能是什么问题，或者我应该使用什么来从 Pinia 商店中的操作中导航我的路线。

import { defineStore } from "pinia";
import axios from "axios";

export const SignupStore = defineStore("signup", {
  state: () => ({
    fullName: "",
    dob: "",
    email: "",
    password: "",
    passwordConfirm: "",
    gender: "",
    program: "",
    genderOptions: ["Male", "Female"],
    degreePrograms: ["Degree program", "HND program", "Masters program"],
    isSignupCorrect: false,
  }),

  actions: {
    async signup() {
      let dob = new Date(this.dob).toISOString().substring(0, 10);
      let gender = this.gender.substring(0, 1);
      let program = this.program;
      if (program == "Degree program") {
        program = "De";
      } else if (program == "HND program") {
        program = "Hn";
      } else {
        program = "Ms";
      }

      console.log(dob);
      console.log(program);

      await axios
        .post("register/", {
          full_name: this.fullName,
          email: this.email,
          password: this.password,
          gender: gender,
          dob: dob,
          program: program,
        })
        .then((response) => {
            console.log('response status is ' + response.status)
            if (response.status == 201) {
                router.push({ name: "AdmissionDashboard" });
              }
        })
        .catch((error) => {
          if (error.response) {
            console.log("signup error traced");
          }
        });
    },
  },
});

【问题讨论】：

您需要导入您的路由器，而不是 Vue 实例。例如，import router from '@/router'; 其中./src/router.js 实现了 Vue 的路由器。

标签： javascript vue-router vuejs3 pinia

【解决方案1】：

您需要导入vue-router 的唯一位置是在您的路由器文件中。

然后，您可以通过导入您的路由器文件（实现 vue-router）在应用程序的任何位置使用它。

因此，您在商店中所需要做的就是导入您的路由器，然后像您正在做的那样调用 push 方法，它应该可以工作。

【讨论】：

我正在一个 vue 3 项目中工作，我已经在我的 router.js 文件中进行了此导入 >
@NjitaArnaud：使用诸如此类的关键信息编辑您的原始帖子
@NjitaArnaud 然后在您的商店中导入my router.js。另外，将来在您的问题中包含更多信息，这样会更容易给您正确的答案。
我现在面临另一个问题。在检查 response.status == 201 是否应该路由到我的 post 请求的 .then 块中的所需页面时，它无法识别要在“if 函数”中执行的语句，但在我的控制台中它打印出来的响应状态是 201 很好，请问您知道可能是什么问题吗？？？
感谢您的接受 :) 关于您的第二个问题，有几件事可以尝试：1）在 if 块中放置一个断点并确认它是否已到达。 2) 将路由器块移到别处并确认它工作正常。如果这两个部分都按预期工作，那么当您将它们放在一起时，它应该可以工作。

【解决方案2】：

另一种选择是将路由器作为插件加载。

在您的商店/索引中，js：

pinia.use(({ store }) => { store.router = markRaw(router) })

然后它将可以在您的商店模块中访问，例如：this.router.push

重复您必须导入您的路由器的警告，例如从 src/router (Quasar)

【讨论】：