Quasar 프레임워크를 사용하여 Vuex 스토어 모듈 작업의 vue 라우터에 액세스하는 방법

Quasar 프레임워크를 사용하여 Vuex 스토어 모듈 작업의 vue 라우터에 액세스하는 방법

나는 사용하고 있다

• 퀘이사 프레임워크 v2 베타
• Vue 3 컴포지션 API
• 브룩스 4
• 활자표기

내 문제:

라우터를 가져오고 Vuex store module actions.ts에서 사용자를 리디렉션하려고 할 때Router.push('/')그것은 나에게 오류를 보여준다. =>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

라우터/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
})

문제는 Quasar에서 기본적으로 사용하는 "루트" 포장지 때문이다.가게에도 같은 문제가 있다.이 포장지가 필요한지 잘 모르겠는데 없으면 다 잘 돼.나는 단지 아래의 예와 같이 그 포장지를 제거하고 라우터 객체를 직접 내보낸다.

src/sshd/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는 상점과 같은 일을 하는 것으로, 잘 작동한다.

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

글로벌 선언

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

실행 중인 라우터를 사용하려면 다음과 같이 하십시오.

Router.push('/');

나는 vue-router에 대한 새로운 업데이트로 당신이 useRouter에 전화를 걸어 푸시를 할 수 있다고 믿으며, 따라서 나는 당신이 다음과 같은 행동을 변경할 것을 제안한다.

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

그게 너에게 도움이 되었으면 좋겠어!

당신이 사용할 수 있는 가게 안this.$router.push('/myRoute')아무 것도 가져오지 않고. 나는 quasar v2도 사용하고 있지만, 나는 명확성을 위해 별도의 파일에 나의 상태/게이터/주문/주문 및 동작을 가지고 있다.

참조URL: https://stackoverflow.com/questions/67791283/how-to-access-vue-router-in-vuex-store-module-actions-with-quasar-framework