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 组件时，它显示如下：

为什么我会不确定？我对 vuex、命名空间、模块等有点不知所措，所以请随意过度解释......

在我使用的另一个组件中

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" 行现在应该可以工作了。

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