루트 상태에서 Vuex 모듈에 액세스할 수 없음

루트 상태에서 Vuex 모듈에 액세스할 수 없음

필터 설정을 미리 로드하고 응용 프로그램의 상태를 업데이트하기 위해 Vuex 내부에서 경로의 쿼리 매개 변수를 가져와야 했습니다.이를 가능하게 하기 위해 vuex-router-sync를 설치했습니다.

다음 단계에서는 Vuex와 VueRouter를 동기화했습니다.

라우터:

Vue.use(VueRouter);
export default new VueRouter({ mode: 'history' });

---

스토어:

Vue.use(Vuex);
export default new Vuex.Store({
    modules: { filters: FiltersModule },
    plugins: [ FiltersPlugin ]
});

---

앱의 부트스트랩:

const unsync = sync(store, router);
new Vue({
    el: '#restaurant-admin-app',
    components: {
        'App': AppComponent,
        'filters': FilterComponent,
        'orders-table': OrdersTableComponent
    },
    store,
    router
});

---

나의FilterPluginURL 구문 분석을 트리거해야 합니다.

export default store => {
    store.dispatch('filters/parseURLFilterSettings');
}

---

이제 재미있는 부분은 URL 구문 분석 작업입니다.

parseURLFilterSettings: ({ state, commit, rootState }) {
    console.log('RootState:',                rootState);
    console.log('Route module (incorrect):', rootState.route);
    console.log('Filters module (correct):', rootState.filters);
    console.log('Object\'s keys:',           Object.keys(rootState));
}

내가 뭘 잘못하고 있는 거지?동기화와 관련된 것일 수도 있다고 생각했지만, 마지막에 console.log는 Object 경로가 거기에 있다는 것을 분명히 보여줍니다(그리고 비어있지 않습니다). 하지만 어떻게든 제가 그것에 접속하면.undefined잘 부탁드립니다.

그 문제는 여기서 매우 잘 설명되었습니다.기본적으로 말하는 것은 콘솔에서 객체의 본체를 열면 객체의 값이 평가됩니다.

문제는 제가 가지고 있지 않았다는 것입니다.route모듈이 아직 로드되지 않았습니다. 왜냐하면 vuex 플러그인에서 작업을 발송하려고 했기 때문입니다. vuex 플러그인은 다음 작업보다 먼저 로드되는 것 같습니다.vuex-router-sync동기화가 완료되었습니다.

애플리케이션의 부트스트랩 로직을 vuex 플러그인에서 vuex 플러그인으로 이동했을 때 문제가 해결되었습니다.AppRootComponent의 마운트 라이프사이클 이벤트.

라우터 동기화를 가져와야 합니다.그런 다음 저장소와 경로가 올바르게 작동합니다.저는 보통 이것을 합니다.main.js파일.

import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'

sync(store, router)

언급URL : https://stackoverflow.com/questions/51531723/vuex-module-not-accessible-from-rootstate