Vuex Store Module 访问状态答案

【问题标题】：Vuex Store Module access stateVuex Store Module 访问状态
【发布时间】：2017-05-02 12:42:30
【问题描述】：

我想知道如何从另一个文件访问模块存储/状态。到目前为止，这是我的代码：

/store/index.js

import Vuex from 'vuex';
import categories from './modules/categories';

Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
  },
  actions: {

  },
  mutations: {

  },
  getters: {

  },
  modules: {
    categories,
  },
});
export default store;

/store/modules/categories.js

const categories = {
  state: {
    categories: [
      {
        name: 'category1'
        path: 'path/to/there'
        subcategories: [
          {
            name: 'subcategory1'
            path: 'path/to/other/there'
            subsubcategory: [
              {
                name: 'subsubcategory1'
                path: 'path/to/other/there'
              }
              {
                name: 'subsubcategory1'
                path: 'path/to/other/there'
              }
            ]
          }
          {
            name: 'subcategory2'
            path: 'path/to/other/there'
          }
        ]
      }
      {
        name: 'category2'
        path: 'path/to/there'
        subcategories: [
          {
            name: 'subcategory2'
            path: 'path/to/other/there'
          }
          {
            name: 'subcategory3'
            path: 'path/to/other/there'
          }
        ]
      }
    ]
  },
  actions: {

  },
  mutations: {

  },
  getters: {

  },
}

编辑：我希望能够在此处访问模块状态/存储，例如： /home.vue

<template>
  <div>
    <Headers></Headers>
    <div class="user row">
      <p>User Page</p>
      <p> I want to be able to access modules store/state here and be able to pass getters here to filter some results from state</p>
    </div>
    <Footers></Footers>
  </div>
</template>

<script>

import 'vue-awesome/icons';
import { mapState, mapGetters } from 'vuex';
import Headers from '/Headers';
import Footers from '/Footers';

export default {
  name: 'home',
  data() {
    return {
    };
  },
  methods: {
  },
  components: {
    Headers,
    Footers,
  },
  computed: {
    ...mapGetters([
      '',
    ]),
    ...mapState([
      'categories',
    ]),
  },
};
</script>

<style lang="scss" scoped>

</style>

现在，我以前能够访问和循环访问类别，但是到@Sumit-Ridhal 我发现我的商店模块有误，所以我不得不更改它，现在我不知道如何访问它的状态。

提前谢谢，干杯

【问题讨论】：

从哪里访问？您可以分享您尝试访问商店的组件的代码吗？
@GerardoRosciano 我刚刚更新了我的问题并添加了一个 Vue 文件以供参考。
在视图中您应该可以通过 categories.categories 访问它。当您检查该变量时会发生什么？代码似乎还可以。尝试安装这个：chrome.google.com/webstore/detail/vuejs-devtools/…它会帮助你调试
@GerardoRosciano 如果我尝试访问类别模块，我会得到一个空对象。直到几个小时前，我还使用 const state { categories: }... 那时，我可以访问 categories.categories 但现在不行...我无法理解这个:(
应该可以了，帮我一个忙，试着创造一个小提琴什么的，我们会更快地帮助你。另外，安装 devtools，在那里你可以检查变量

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

store.state."模块名称"."状态数据

我确实存储这样的模块。

这是索引存储。商店/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import posts from '@/store/posts' // import external store mod
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    posts
  },
  strict: true,
  plugins: [
    createPersistedState()
  ],
  state: {...... etc

帖子存储模块

  // how to access this store console.log('module state', store.state.posts.data)
    export default {
      state: {
        data: 'dfsd'
      },
      getters: {
      },
      mutations: {
      },
      actions: {
      }
    }

获取存储模块数据

从'@/store/'导入商店

store.state.posts.data

【讨论】：