Question

使用 Vuex 时 $router.push() 不是函数错误

2020-02-10

1819

javascript vue.js vuejs2 vuex vue-router

创建新项目后，我想将用户路由到另一个页面，以便他们可以向项目添加更多信息。

这是可行的：

createProject() {
      ProjectService.createProject(this.project)
        .then(response => {
          this.$router.push({
            name: "project-update",
            params: { id: response.data.data.id }
          });
        })
}

我想使用 vuex 来处理所有这些，但这不起作用。

createProject() {
  this.$store
    .dispatch("project/postProject", this.project)
    .then(response => {
      this.$router.push({
        name: "project-update",
        params: { id: response.data.data.id }
      });
    })
    .catch(() => {});
}

我收到的错误是： “state.projects.push 不是函数”

这是我在 Vuex 中的 postProject 操作：

  postProject({ commit, dispatch }, project) {
    return ProjectService.createProject(project)
      .then(() => {
        commit('ADD_PROJECT', project);
        const notification = {
          type: 'success',
          message: 'Your project has been created!'
        };
        dispatch('notification/add', notification, { root: true });
      })
      .catch(error => {
        const notification = {
          type: 'error',
          message: 'There was a problem creating your project: ' + error.message
        };
        dispatch('notification/add', notification, { root: true });
        throw error;
      });
  }

看起来“this”的上下文没有到达路由器或其中的推送功能。我如何访问路由器并路由到下一个页面？

Answer 1

您可以做的是将您的路由器模块导入到您的 vuex 模块中，如下所示：

import {router} from "../main.js"
// or
import router from '../router'

export default {
  actions: {
    createProject () {
      this.$store
        .dispatch("project/postProject", this.project)
        .then(response => {
          router.push({
            name: "project-update",
            params: { id: response.data.data.id }
          })
        })
        .catch(() => { })
    }
  }
}

Answer 2

我遇到了同样的问题，但我通过以下方式解决了：

this.$router.replace("/");

使用以下方式在 vuex 和 nuxt store 中出现问题： this.$router.push("/");