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 MINOR UPDATE：将mapState代码更新为更简单的代码。

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

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

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

这将启用模块的命名空间，并使其自包含并可重复使用。

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

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

这会将组件变量filtersPanelActive映射到您的searchPage模块状态变量filtersPanelActive。您模板中的v-if="filtersPanelActive"行现在可以正常使用。

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

Vuex模块状态未定义

1 个答案: