$ router.pu sh () не является ошибкой функции при использовании Vuex - PullRequest
Новая
       66

$ router.pu sh () не является ошибкой функции при использовании Vuex

0 голосов
/ 10 февраля 2020

После создания нового проекта я бы хотел направить пользователя на другую страницу, чтобы он мог добавить больше информации в проект.

Это работает: 

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 is not a function"

Это мое действие postProject в Vuex: 

  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" не достигает маршрутизатора или функции pu sh в нем , Как я могу получить доступ к маршрутизатору и перейти на следующую страницу?

1 Ответ

1 голос
/ 10 февраля 2020

Что вы можете сделать, так это импортировать модуль маршрутизатора в модуль 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(() => { })
    }
  }
}
...