如何使用 Quasar 框架访问 Vuex 存储模块操作中的 Vue 路由器？答案

【问题标题】：How to access vue router in Vuex store module actions with Quasar framework?如何使用 Quasar 框架访问 Vuex 存储模块操作中的 Vue 路由器？
【发布时间】：2021-08-19 19:05:51
【问题描述】：

我正在使用

Quasar Framework v2 测试版
Vue 3 组合 API
Vuex 4
打字稿

我的问题：

当我导入路由器并尝试使用 Router.push('/') 在 Vuex 商店模块 actions.ts 中重定向 User 它显示了一个错误 => 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
})

【问题讨论】：

Router 在../../router 中是如何定义的？错误非常简单，看起来 Router 对象不是您认为的类型。
@MattU，看看，我更新了问题

标签： typescript vue.js vuex quasar-framework

【解决方案1】：

我相信随着 vue-router 的新更新，您可以调用 useRouter 来进行推送，因此我建议您在 actions.ts 中进行以下更改

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

希望对你有帮助！

【讨论】：

【解决方案2】：

问题是因为在 Quasar 中默认使用的“路由”包装器。商店也存在同样的问题。我不确定这个包装器是否需要，但没有它一切都很好。我只是删除那些包装器并直接导出 Router 对象，如下例所示。

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)
})

顺便说一句，对商店做同样的事情，效果很好。

【讨论】：

【解决方案3】：

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

全局声明

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

在实际中使用路由器

Router.push('/');

【讨论】：

【解决方案4】：

您可以在商店内使用this.$router.push('/myRoute')，而无需导入任何内容。我也在使用 quasar v2，尽管我没有使用 typescript，并且为了清楚起见，我将状态/getters/mutations 和操作放在单独的文件中。

【讨论】：