Vue.js - Vuex 모듈에서 현재 경로 가져오기

Vue.js - Vuex 모듈에서 현재 경로 가져오기

현재 경로의 매개 변수를 기준으로 스토어 입력을 반환하는 이름보다 앞선 vuex 스토어가 있다.

import Router from '../../router/index'

const options = {
  routeIdentifier: 'stepId'
}

export function fromRoute(state) {
  if (!options.routeIdentifier || !Router.currentRoute.params) {
    return null
  }

  return state.all.find(element => {
    return element.identifier === Router.currentRoute.params[options.routeIdentifier]
  })
}

이것은 초기 부하에 대해 예상한 대로 작동한다.그러나 노선이 바뀔 때마다 재장전되지는 않는다.

경로 변경 시 게이터의 재계산을 다시 로드/강제하는 방법이 있는가?

그 반대보다는 라우터 모듈의 스토어를 가져오는 것이 더 지원될 것이다.당신은 그것을 사용할 수 있다.beforeEach매장에서 현재 경로를 설정하는 내비게이션 가드먼저 스토어를 준비하십시오.

store.js.

state: {
  route: null
},
mutations: {
  SET_ROUTE(state, route) {
    state.route = route;
  }
},
modules: { ... }

라우터 모듈에서beforeEach현재 항로를 저장하기 위해 경비하다.to주장:

라우터.js

import store from '@/store';  // Import the store in the router module

const router = new VueRouter({
  ...
})

router.beforeEach((to, from, next) => {
  store.commit('SET_ROUTE', to);
  next();
});

Vuex 모듈 getter에서 이 경로에 액세스하려면 세 번째 getter 인수를 통해 경로에 액세스하십시오.rootState:

저장/일부 모듈.js

getters: {
  getRoute(state, getters, rootState) {
    return rootState.route;
  }
}

참조URL: https://stackoverflow.com/questions/65995093/vue-js-get-current-route-in-vuex-module