$router.push() not a function error using Vuex

Question

After a new project is created, I'd like to route the user to another page so they can add more information to the project.

This is working:

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

I'd like to use vuex to handle all this, but this is not working.

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

The error I'm getting is: "state.projects.push is not a function"

This is my postProject action in 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;
      });
  }

Looks like the context of 'this' is not reaching the router or the push function therein. How can I access the router and route to that next page?

Answer 1

What you can do is import your router module into your vuex module like so:

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(() => { })
    }
  }
}