首页 文章

Vuex模块状态未定义

提问于
浏览 次
2

我对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组件时，它显示以下内容：

enter image description here

为什么我会被定义？我被vuex，命名空间，模块等轻微淹没，所以随意解释一下......

在我使用的另一个组件中

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

并且值得注意的是'works' - 如同在vuex状态中从 true 变为 false ，但是我的 mapState 仍然没有通过任何东西 . 所以模块似乎正确加载 .

vuex vuex-modules

1 回答

  • 2

    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" 行现在可以使用了 .

    如果这样可以解决您的问题，请告诉我，如果没有，请告诉我，我会更新我的答案 .

    回复于

相关问题