web-dev-qa-db-ja.com

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にアクセスしようとすると、コンポーネントの1つで_this.$store.ProfileData.ajaxData_を介して、コンソールにundefinedエラーが表示されます。 _this.$store.ProfileData_または_this.$store.ajaxData_の読み取りについても同じことが言えますが、_this.$store_が定義されており、すでに読み取ることができます。また、ブラウザのコンソールのストアの__modules_プロパティにProfileDataオブジェクトが追加されているのがわかります。

Vuexに登録されているモジュールにアクセスするのに間違っているのは何ですか？どうすればそれらにアクセスできますか？

vue.jsvuejs2vue-componentvuexvuex-modules
3
Arrrr

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>

モジュールのゲッター、アクション、ミューテーター、それらに直接アクセスする方法は？

名前空間が設定されているかどうかによって異なります。デモを参照してください（コメントの説明）：

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>
8
acdcjunior

Key：valueを使用してモジュールを追加したようですが、モジュールにアクセスするためのキーはProfileです。それを使用してモジュールを呼び出すか、Profileキーを使用せずにモジュール設定を直接定義してみてください。

modules: {
    ProfileData
}
0
tomrlh