Vuex 模块状态未定义

Question

我对 vuex 模块有点困惑。

我有一个 Vue 组件，它显示在搜索页面上:

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

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

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

然后我有一个 store.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 组件时，它显示以下内容:

为什么我得到 undefined？我对 vuex、 namespace 、模块等有点不知所措，所以请随意过度解释......

在我使用的另一个组件中

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

值得注意的是，它“有效”——因为在 vuex 状态中从 true 变为 false，但是我的 mapState 仍然是通过任何事情。因此模块似乎已正确加载。

Answer 1

2018-06-05 小更新:将 mapState 代码更新为更简单的内容。

要在代码中添加两件事以启用命名空间并确保您引用的是正确的模块。

在您的 searchPage 模块中，将 namespaced: true 属性添加到导出中:

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

这为模块启用命名空间并使其自包含和可重用。

然后在您的搜索页面组件中将您的 mapState 更改为:

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

这会将组件变量 filtersPanelActive 映射到您的 searchPage 模块状态变量 filtersPanelActive。您模板中的 v-if="filtersPanelActive" 行现在应该可以工作了。

如果这能解决您的问题，请告诉我，如果不能，请告诉我，我会更新我的答案。