$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?

The action and dispatch are working fine, the data is successfully stored in the database and state, only the router is not working. — connorcode
– connorcode, Commented Feb 10, 2020 at 6:29
you need to include the router module into that vuex module and use router.push() — Karma Blackshaw
– Karma Blackshaw, Commented Feb 10, 2020 at 6:30
then how do you get this error state.projects.push is not a function? Just try commenting router.push line and check it its still throwing this error. — Riddhi
– Riddhi, Commented Feb 10, 2020 at 6:31
@KarmaBlackshaw How do I add the router module? Should I simply place what I have here into the action, or do I have to include something? — connorcode
– connorcode, Commented Feb 10, 2020 at 6:36

Karma Blackshaw · Accepted Answer · 2020-02-10 06:36:15Z

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

answered Feb 10, 2020 at 6:36

Karma Blackshaw

9428 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Karma Blackshaw Over a year ago

can you show your new createProject method ? if you still used this.$router, kindly changed it into just router only

connorcode Over a year ago

I deleted my latest comment once I noticed that. Changed my code to reflect yours and I'm still getting the "state.projects.push is not a function" error

connorcode Over a year ago

Tried both import variations

Karma Blackshaw Over a year ago

the router part is done. Next thing is your postProject which seems to have a wrong implementation. Can you show your postProject method ?

Karma Blackshaw Over a year ago

Most probably your state variable projects is an object and not an array. You should check that first by doing console of typeOf of your variable state.projects.

|

Jeel Rupapara · Accepted Answer · 2022-12-17 12:56:22Z

0

I have a same issue but I solved by doing this:

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

Having issue in vuex and nuxt store by using this : this.$router.push("/");

answered Dec 17, 2022 at 12:56

Jeel Rupapara

11 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related