【问题标题】：Access module from Vuex Store来自 Vuex Store 的访问模块
【发布时间】：2018-09-15 15:05:06
【问题描述】：

我有以下模块：

export const ProfileData = {
    state: {
        ajaxData: null;
    },
    getters: {/*getters here*/},
    mutations: {/*mutations here*/},
    actions: {/*actions here*/}
}

并且此模块已在我的全球商店中注册：

import {ProfileData} from './store/modules/ProfileData.es6'
const store = new Vuex.Store({
    modules: {
       ProfileData: ProfileData
    }
});

我也使用了Vue.use(Vuex)，并将商店设置在new Vue({ store: store})。但是，当我尝试通过this.$store.ProfileData.ajaxData 在我的一个组件中访问属于ProfileData 模块的ajaxData 时，控制台显示undefined 错误。阅读this.$store.ProfileData 或this.$store.ajaxData 也是如此，而this.$store 已定义并且我已经能够阅读它。我还看到ProfileData 对象添加到浏览器控制台中商店的_modules 属性中。

访问注册到Vuex 的模块我做错了什么？我怎样才能访问这些？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex vuex-modules

【解决方案1】：

直接访问Vuex模块的状态

访问Module's local state 的格式是$store.state.moduleName.propertyFromState。

所以你会使用：

this.$store.state.ProfileData.ajaxData

演示：

const ProfileData = {
  state: {ajaxData: "foo"}
}
const store = new Vuex.Store({
  strict: true,
  modules: {
    ProfileData
  }
});
new Vue({
  store,
  el: '#app',
  mounted: function() {
  	console.log(this.$store.state.ProfileData.ajaxData)
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>ajaxData: {{ $store.state.ProfileData.ajaxData }}</p>
</div>

模块的Getter、Actions和Mutators，如何直接访问？

这取决于它们是否被命名空间。参见演示（cmets 中的解释）：

const ProfileDataWithoutNamespace = {
  state: {ajaxData1: "foo1"},
  getters: {getterFromProfileDataWithoutNamespace: (state) => state.ajaxData1}
}
const ProfileDataWithNamespace = {
  namespaced: true,
  state: {ajaxData2: "foo2"},
  getters: {getterFromProfileDataWithNamespace: (state) => state.ajaxData2}
}
const store = new Vuex.Store({
  strict: true,
  modules: {
    ProfileDataWithoutNamespace,
    ProfileDataWithNamespace
  }
});
new Vue({
  store,
  el: '#app',
  mounted: function() {
    // state is always per module
  	console.log(this.$store.state.ProfileDataWithoutNamespace.ajaxData1)
    console.log(this.$store.state.ProfileDataWithNamespace.ajaxData2)
    // getters, actions and mutations depends if namespace is true or not
    // if namespace is absent or false, they are added with their original name
    console.log(this.$store.getters['getterFromProfileDataWithoutNamespace'])
    // if namespace is true, they are added with Namespace/ prefix
    console.log(this.$store.getters['ProfileDataWithNamespace/getterFromProfileDataWithNamespace'])
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>Check the console.</p>
</div>

【讨论】：

我明白了，通过state 属性我现在可以得到ajaxData。但是，如何访问吸气剂、突变等）。一个例子将不胜感激:)
我添加了另一个演示，展示了getters（以及动作、突变）的行为方式。实际上，它们取决于模块是否被命名空间。检查更新的答案。
谢谢，现在我遇到了另一个问题，我知道我问了太多问题 :D，我怎样才能等待调度程序，以便只有在它完成后我才能继续安装和创建一个页面？
调度器必须返回承诺，然后你将等待调度器返回的承诺。问多个问题没有问题。如果您需要，请再写一篇并在这些 cmets 中与我联系，我会很乐意看看（并尽可能提供帮助:)

【解决方案2】：

我看到您使用 key:value 添加了模块，访问您的模块的键是 Profile。尝试使用它来调用你的模块，或者直接定义模块设置，没有 Profile 键：

modules: {
    ProfileData
}

【讨论】：