Vuex 스토어에서 모듈 액세스

Vuex 스토어에서 모듈 액세스

다음 모듈이 있습니다.

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})적절히.단, 접속을 시도하면ajaxData소속되어 있다ProfileData모듈, 컴포넌트 중 하나를 통해this.$store.ProfileData.ajaxData콘솔에는,undefined에러입니다.동일한 것은, Error를 읽는 것에 대해서입니다.this.$store.ProfileData또는this.$store.ajaxData,하는 동안에this.$store정의되어 있고 이미 읽을 수 있습니다.또,ProfileData에 추가된 오브젝트_modules브라우저 콘솔에 있는 저장소의 속성.

에 등록된 모듈에 액세스하기 위해 잘못된 것은 무엇입니까?Vuex어떻게 하면 접근할 수 있나요?

Vuex 모듈 상태에 직접 액세스

모듈의 로컬 상태에 액세스하는 형식은 다음과 같습니다.$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>

---

모듈의 Getters, Actions 및 Mutators, 직접 액세스하려면 어떻게 해야 합니까?

그것은 그들이 이름을 붙이는지 아닌지에 달려있다.데모 참조(댓글 설명):

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>

key:value를 사용하여 모듈을 추가했습니다.모듈에 액세스하기 위한 키는 Profile입니다.Profile 키를 사용하지 않고 모듈을 호출하거나 모듈 설정을 직접 정의합니다.

modules: {
    ProfileData
}

언급URL : https://stackoverflow.com/questions/49678333/access-module-from-vuex-store