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>

现在，我之前能够访问并循环遍历类别，但是thnx到@Sumit-Ridhal我发现我的商店模块错了所以我不得不改变它现在我不知道如何访问它状态。

Thnx提前，干杯

Answer 1

store.state。“模块名称”。“状态数据

我确实存储这样的模块。

这是索引存储。 store / 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

Vuex商店模块访问状态

1 个答案: