Vuex 모듈 상태가 정의되지 않음

Vuex 모듈 상태가 정의되지 않음

vuex 모듈에 대해 좀 혼란스럽네요.

검색 페이지에 표시되는 Vue 구성 요소가 있습니다.

<template>
    <div v-if="filtersPanelActive">
        Filters panel
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["filtersPanelActive"])
  },
  methods: {}
};
</script>

그 후 스토어를 갖게 되었습니다.js

import Vue from "vue";
import Vuex from "vuex";
import searchPage from "./modules/searchPage.js";
Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    artPage,
    legalsPage,
    searchPage
  }
});

및 검색 페이지 스토어:

const searchPage = {
  state: {
    filtersPanelActive: false
  },
  actions: {},
  mutations: {
    toggleFilters(state) {
      state.filtersPanelActive = !state.filtersPanelActive;
    }
  },
  getters: {}
};

export default searchPage;

하지만 제대로 작동하는 건 없어...vuex 개발 도구에는 다음이 있습니다.

{
   "artPage":{
      "startDate":false,
      "endDate":false,
      "confirmBooking":false
   },
   "legalsPage":{
      "filesUploaded":[

      ]
   },
   "searchPage":{
      "filtersPanelActive":false
   }
}

그러나 Vue 컴포넌트를 검사하면 다음과 같이 표시됩니다.

왜 이렇게 막히는 거죠?Vuex, 네임스페이스, 모듈 등에 약간 압도당해서...

사용하는 다른 컴포넌트

this.$store.commit("toggleFilters");

또한 vuex 상태에서의 변경과 같이 '작동'에 주의할 필요가 있습니다.true로.false단, 나의mapState아직도 아무것도 안 풀리고 있어요따라서 모듈이 올바르게 로딩되어 있는 것 같습니다.

2018-06-05 마이너 업데이트: 업데이트 완료mapState코드를 좀 더 간단한 것으로 만들어요

네임스페이스를 활성화하고 올바른 모듈을 참조하기 위해 코드에 추가해야 할 두 가지가 있습니다.

고객님의 고객명searchPage모듈, 추가namespaced: true다음과 같은 속성을 내보냅니다.

const searchPage = {
    namespaces: true,
    state: { ... },
    ...
}

이를 통해 모듈의 네임스페이스를 활성화하고 모듈을 스스로 억제하여 재사용할 수 있습니다.

그런 다음 검색 페이지 구성 요소를 변경합니다.mapState다음과 같이 입력합니다.

computed: {
  ...mapState('searchPage', [ 'filtersPanelActive' ])
}

구성 요소 변수를 매핑합니다.filtersPanelActive고객님께searchPage모듈 상태 변수filtersPanelActive.당신의.v-if="filtersPanelActive"이제 템플릿의 행이 작동해야 합니다.

이것으로 문제가 해결되면 알려주시고 해결되지 않으면 알려주시면 답변을 업데이트하겠습니다.

언급URL : https://stackoverflow.com/questions/49795498/vuex-module-state-undefined