[Solved] Using router from vuex action

[comteharbour]

I’m trying to reroute the user after an action.

I configured the routes:

const routes = [
  {
    path: '/',
    component: () => import('layouts/layout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      {
        path: 'myPage',
        component: () => import('pages/myPage.vue')
      }
    ]
  }
]

if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

And I kept the default configuration for the router.

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation
 */

export default function (/* { store, ssrContext } */) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ y: 0 }),
    routes,

    // Leave these as is and change from quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
}

I can access myPage with a click on <router-link>

<template>
  <q-page>
      <router-link to="/myPage">my page</router-link>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',
}

But I want to access it from a vuex action…

import router from '../../../router'

export const myAction = context => {
  // code
  router().push({path: '/myPage'})
}

…that I can dispatch in my previous component

<template>
  <q-page>
      <router-link to="/myPage">my page</router-link>
      <q-btn @click="myAction">my page</q-btn>
  </q-page>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'PageIndex',
  methods: {
    ...mapActions([ 'myAction' ])
  }
}
</script>

And, while the <router-link> works well, when I click the <q-btn>, the address bar shows the correct path (http://localhost:8080/#/myPage), but the MyPage page isn’t loaded. It only loads when I refresh the page.

What am I doing wrong ?

[rstoenescu]

export function myAction () {
  // code
  this.$router.push({path: '/myPage'})
}

[comteharbour]

@rstoenescu It doesn’t work since actions are not a vue component. I need to import the router to interact.
If I use your syntax, I get an error message TypeError: "_this is undefined"

[rstoenescu]

The error suggests you’re still using arrow function instead of normal function as I indicated.

[comteharbour]

@rstoenescu It works. Thanks a lot !