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

Posted 2023-02-22

【中文标题】如何使用 Quasar 框架访问 Vuex 存储模块操作中的 Vue 路由器？

【英文标题】：How to access vue router in Vuex store module actions with Quasar framework?

【发布时间】：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 s-s-r 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, /* s-s-rContext */  ) 
  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 === 's-s-r' ? void 0 : process.env.VUE_ROUTER_BASE
    )
  )
 

  return Router
)

【问题讨论】：

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

@MattU，看看，我更新了问题

【参考方案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 和操作放在单独的文件中。