Nuxt.js: What is the best way to access this.$router.push() / router.push() inside the Vuex?

[gtso86]

This seems a silly question but I'm really struggling right now to accomplish a simple router.go('/') inside store/index.js. Basically I want to change the page after I complete the authentication. I'm using this example as base.

I know const router = require('~router'); isn't working anymore since rc-3 removed the alias to ~router.

I tried access this.$router but isn't available either. I also tried import router from 'vue-router'; with no luck :(

---

Here a partial of my store/index.js:

export const actions = {
  // Login
  async login({ commit }, { email, password }) {
    await axios.post('/api/account/login', {
      email,
      password,
    })
      .then((response) => {
        console.log('response:', response);

        if (response.status === 200) {
          console.log('>> Login successfull');
          commit('SET_USER', response.data);
          sessionStorage.setItem('user', JSON.stringify(response.data));

          //I can't make work!
          Router.push('/about');
        } else if (response.status === 204) {
          console.log('>> Username password do not match');
        } else {
          console.log('>> Username does not exists');
        }
      })
      .catch((error) => {
        commit('SET_USER', null);

        console.log('OPS!');
        console.log(error);
      });
  },
};

I appreciate any help... Thanks in advance!

_{This question is available on Nuxt.js community (#c1227)}

[gtso86]

Well, looks like I figure out a way BUT I don't know if is the best one:

Inside my login.vue file I added finally_statements

    methods: {
      async clickLogin() {
        console.log('Start login process...');

        try {
          await this.$store.dispatch('login', {
            email: this.login.email,
            password: this.login.password,
            router: $this.router,
          });

          this.login.error = null;
        } catch (error) {
          this.login.error = error.message;
        } finally {
          this.$router.push('/');
        }
      },
    },

[uptownhr]

yea, it's probably best that you include your .push commands outside your actions.

In the future though this.$router may become available inside your actions. We are waiting on vuex to allow for this in their next release.

[gtso86]

yea, it's probably best that you include your .push commands outside your actions.

Hey @uptownhr , could you give me a example?

[uptownhr]

@gtso86 very similiar to your second approach that you weren't sure about. I believe that is the right way to do it.

As I mentioned though, in the future you would be able to configure vuex to have $router inside actions. For the time being, if you really want router, you can pass it in to your dispatch call.

this.$store.dispath('login', {router: $this.router})

[stursby]

@gtso86 I've also found that you can access the router in your Vuex store by calling the following:

this.app.router.push('/')

[polyaha]

try : $nuxt._router.push('/about')

[jamesAtcodeninja]

@polyaha $nuxt.$router.push worked for me, but where is the global $nuxt object documented?

[johnyluyte]

Same as @jamesAtcodeninja , $nuxt.$router.push worked for me while this.app.router.push('/') does not.

@polyaha Would you kindly point out where the document is? I cannot find it on the Nuxt API either.

[charmz]

this._router.push worked for me. Is there an issue in accessing the router like this?

[MohammadSabbagh]

you need to import router then use it without this.$

import router from './router' const actions = { goto ({ commit , dispatch}, payload) { router.push({ path: payload.Redirect}) }, }

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.