3

我对 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仍然没有完成任何事情。因此该模块似乎已正确加载。

4

1 回答 1

4

2018-06-05 次要更新：将mapState代码更新为稍微简单一些。

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

在您的searchPage模块中，将namespaced: true属性添加到导出中，如下所示：

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

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

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

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

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

让我知道这是否可以为您解决问题，如果没有，请告诉我，我会更新我的答案。

于 2018-04-12T20:20:11.363 回答