javascript - Vuex Store Module 访问状态

Question

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

/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我发现我的商店模块是错误的，所以我不得不更改它，现在我不知道如何访问它的状态。

提前致谢， 干杯

Answer 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