How to access vue router in Vuex store module actions with Quasar framework?

Question

I am using

Quasar Framework v2 Beta
Vue 3 Composition Api
Vuex 4
Typescript

My problem:

When I import router and try to redirect User in Vuex store module actions.ts using Router.push('/') it shows me an error => Property 'push' does not exist on type 'RouteCallback<StateInterface>'

actions.ts

import { ActionTree } from 'vuex'
import { StateInterface } from '../index'
import { LoginResponseInterface } from './state'
import { api } from 'boot/axios'
import { Cookies } from 'quasar'
import Router  from '../../router'
const actions: ActionTree<LoginResponseInterface, StateInterface> = {
  UserLogin({commit}, formData){
    api.post('auth/login', formData)
    .then(response => {
      var user = {firstName: response.data.firstName, lastName: response.data.lastName, phoneNumber: response.data.phoneNumber}
      commit('setUserDetails', {token: response.data.token, user})
      Cookies.set('auth_token', response.data.token)
      Router.push('/') //`Property 'push' does not exist on type 'RouteCallback<StateInterface>'`
    })
  }
}

export default actions

router/index.ts

import { route } from 'quasar/wrappers'
import {
  createMemoryHistory,
  createRouter,
  createWebHashHistory,
  createWebHistory
} from 'vue-router'
import { StateInterface } from '../store'
import routes from './routes'

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default route<StateInterface>(function ({ store, /* ssrContext */ } ) {
  const createHistory =
    process.env.SERVER
      ? createMemoryHistory
      : process.env.VUE_ROUTER_MODE === 'history'
        ? createWebHistory
        : createWebHashHistory

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(
      process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
    )
  })
 

  return Router
})

How is Router defined in ../../router? The error is pretty straightforward, and it looks like that Router object is not the type you assume it is. — Matt U
– Matt U, Commented Jun 1, 2021 at 15:17

dennisdup · Accepted Answer · 2021-08-22 09:46:36Z

3

import { useRouter, useRoute } from 'vue-router'

Global declaration

const Router = useRouter();
const Route = useRoute();

To use the router in action

Router.push('/');

answered Aug 22, 2021 at 9:46

dennisdup

1671 silver badge4 bronze badges

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

1 Comment

NaturalDevCR Over a year ago

This won't work outside setup function or components, as far as i know and tried

Taras Mykytka · Accepted Answer · 2021-07-18 15:40:32Z

the problem is because of "route" wrapper which using by default in Quasar. The same trouble exists with store. I'm not sure is this wrapper required but without it all works pretty well. I just removing those wrappers and exporting directly Router object like in example below.

src/router/index.js

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'

const createHistory = process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory

export default createRouter({
  scrollBehavior: () => ({
    left: 0,
    top: 0
  }),
  routes,

  history: createHistory(process.env.VUE_ROUTER_BASE)
})

BTW, doing the same with store, works fine.

Miguel Angel Rodriguez Jr. · Accepted Answer · 2021-06-16 17:02:19Z

0

I believe with the new update to vue-router you can call useRouter to be able to do a push, so I suggest you make the following change in actions.ts

--- import Router  from '../../router'
+++ import { useRouter } from 'vue-router'

I hope that helps you out!

answered Jun 16, 2021 at 17:02

Miguel Angel Rodriguez Jr.

1

1 Comment

NaturalDevCR Over a year ago

I have the latest version of quasar, and this only works inside components or setup functions

jessie james jackson taylor · Accepted Answer · 2021-08-23 01:52:24Z

0

inside the store you can use this.$router.push('/myRoute') without importing anything at all. i am using quasar v2 as well, although I am not using typescript and I have my state/getters/mutations and actions in separate files for clarity.

answered Aug 23, 2021 at 1:52

jessie james jackson taylor

1781 gold badge2 silver badges9 bronze badges

1 Comment

NaturalDevCR Over a year ago

This didn't work for me at all, im using quasar 2, and just get undefined

styl0r · Accepted Answer · 2022-04-28 10:55:35Z

Clearly a hack, I'm new to Vue and needed a solution in a hurry, so posting in case it helps anyone. Hopefully someone can post a better solution. Using:

Quasar 2.6.6
Vue 3 Composition API (Script Setup)
Vuex 4.0.1
Typescript

When setting a debug point in the code (with the this.$router line commented out) you can see that this.$router does indeed exist in the store action, but if you enable the line then Typescript doesn't like it and will throw a compilation error. The following ts/eslint ignores seem to shut Typescript up:

// store -> action.ts
  userClear (context) {
      console.log('clearing user data');
      // ... code to clear up the user data

      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
      this.$router.push('/login');
  },

Collectives™ on Stack Overflow

How to access vue router in Vuex store module actions with Quasar framework?

My problem:

5 Answers 5

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My problem:

5 Answers 5

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related