Vuex 작업에서 Vue 라우터를 사용하여 탐색하는 방법

Vuex 작업에서 Vue 라우터를 사용하여 탐색하는 방법

나는 Vue 2.x와 Vuex 2.x로 웹 앱을 만들고 있어.http 통화를 통해 원격 위치에서 정보를 가져오는 중인데, 호출이 실패하면 다른 페이지로 리디렉션해 주길 바란다.

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      state.commit('SET_PETS', response.data)
    })
  },
  error => {this.$router.push({path:"/"}) }
  )
}

그렇지만this.$router.push({path:"/"})나에게 다음과 같은 오류를 준다.

미취득(약속)TypeError: 정의되지 않은 속성 'push'를 읽을 수 없음

어떻게 하면 이것을 이룰 수 있을까.

시뮬레이션된 JsFiddle: 여기

import router from './router'

사용하다router.push

그렇게 간단하다.

이 예는 당신에게 도움이 될 수 있다.

main.js.

import Vue from "vue";
import VueRouter from "vue-router";

...

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'hash',
    base: "./",
    routes: [
        { path: "/", component: welcome},
        { path: "/welcome", component: welcome},

    ]
})

actions.js

import {router} from "../main.js"

export const someAction = ({commit}) => {

    router.push("/welcome");
} 

라우터를 앱에 삽입하지 않는 것처럼 보여서 '정의되지 않음'

이전 버전의 vue-roouter에서는 다음 작업을 수행하십시오.Vue.use(VueRouter), 2.0으로 라우터를 아래와 같이 앱에 삽입할 수 있다.

const routes = [
  { path: '/foo', component: Foo },
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router // inject the router
}).$mount('#app')

이렇게 하면 다음과 같이 이용할 수 있을 것이다.this.$router앱 전체에 걸쳐

---

관련 질문에 답변한 후:Vuex 상태에서 Vue 라우터를 사용하는 방법?Vuex가 라우터 인스턴스를 수신하지 않을 것임this.$router따라서 라우터 인스턴스에 대한 액세스를 제공하는 두 가지 방법이 제안되었다.

첫 번째는 웹 팩 글로벌을 인스턴스로 설정하는 것과 관련된 더 직접적인 것이다.

두 번째 방법은 vuex와의 약속을 사용하는 것과 관련이 있으며, 이 작업을 통해 구성 요소가 라우터 인스턴스에 대한 참조를 해결/거부할 수 있다.

초기 답변

인main.js(하나, 모든 모듈을 "설치"하고 생성하는 곳)Vue예, 즉src/main.js):

const vm = new Vue({
  el: '#app',
  router,
  store,
  apolloProvider,
  components: { App },
  template: '<App/>'
})

export { vm }

이것은 나의 예지만, 우리의 경우 여기서 가장 중요한 것은const vm그리고router

당신 안에store:

import { vm } from '@/main'

yourMutation (state, someRouteName) {
  vm.$router.push({name: someRouteName})
}

P.S. 사용import { vm } from '@/main'우리는 필요한 모든 것에 접근할 수 있다.Vuex예를 들어,vm.$root의 일부 구성 요소에 의해 필요한bootstrap-vue.

P.P.S. 우리가 사용할 수 있을 것 같다.vm모든 것이 적재되었을 때.다시 말해서 우리는 사용할 수 없다.vm안쪽에someMutation만약 우리가 전화한다면someMutation안쪽에mounted()왜냐하면mounted()앞에 오다/지다vm생성된다.

---

새로운 답변

콘스탄틴의 대답(수락된 대답)은 내 대답보다 좋으니 초보자에게 어떻게 실천하는지를 보여주고 싶을 뿐이다.

내부 코어 dir(내부)/src나의 경우), 옆에App.vue,main.js그리고 내가 가지고 있는 다른 것들도router.js내용 포함:

import Vue from 'vue'
import Router from 'vue-router'

// Traditional loading
import Home from '@/components/pages/Home/TheHome'

// Lazy loading (lazy-loaded when the route is visited)
const Page404 = () => import(/* webpackChunkName: "Page404" */ '@/components/pages/404)
const Page503 = () => import(/* webpackChunkName: "Page503" */ '@/components/pages/503)

Vue.use(Router)

const router = new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  linkExactActiveClass: 'active',
  routes: [
    {
      path: '*',
      name: 'Page404',
      component: Page404
    },

    {
      path: '*',
      name: 'Page503',
      component: Page503
    },

    {
      path: '/',
      name: 'Home',
      component: Home
    },

    // Other routes
    {....},
    {....}
  ]
})

// Global place, if you need do anything before you enter to a new route.
router.beforeEach(async (to, from, next) => {
  next()
})

export default router

라우터 가져오기 위치main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

const vm = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

export { vm }

마지막으로 구성 요소 내부, Vuex 또는 기타 다른 곳import router from './router'그리고 당신이 필요한 것은 무엇이든지 한다, 예를 들면router.push(...)

나는 내 앱의 위치 상태를 스토어의 나머지 앱 상태와 분리해서 유지하고, 라우터와 스토어를 모두 관리해야 하는 것이 싫어서 스토어 내부의 위치 상태를 관리하는 Vuex 모듈을 만들었다.

이제 다른 상태 변경과 마찬가지로 조치를 발송하여 탐색할 수 있다.

dispatch("router/push", {path: "/error"})

이것은 애니메이션 페이지 전환과 같은 것들을 다루기 쉽게 만드는 추가적인 이점이 있다.

자기 것을 굴리는 것은 어렵지 않다.router모듈, 그러나 다음 작업을 수행하려는 경우 내 모듈도 사용해 보십시오.

https://github.com/geekytime/vuex-router

다음과 같이 라우터 디렉토리에서 라우트를 간단히 가져올 수 있다.

import router from '@/router'

router.push({name: 'Home'})

이 @ 기호는 src 디렉토리의 경로를 대체한다.

참조URL: https://stackoverflow.com/questions/40736799/how-to-navigate-using-vue-router-from-vuex-actions