구성 요소에서 Vuex 모듈 작업에 액세스하는 방법

구성 요소에서 Vuex 모듈 작업에 액세스하는 방법

2개의 모듈로 스토어를 정의하고 1개의 모듈액션에 접속하려고 합니다

this.$store.dispatch('load');

하지만 이해한다:

[vuex] 알 수 없는 작업 유형: 로드

Google에서 찾은 다른 옵션을 시도했지만 아무 것도 작동하지 않았습니다. 모듈 동작에 액세스하는 올바른 방법은 무엇입니까?

코드는 다음과 같습니다.

Vuex 정의:

let session = require('./store/session.js');
let options = require('./store/options.js');
const store = new Vuex.Store({
    modules: {
        session: session,
        options: options,
    },
});

options.syslog

 export default {
    state: {
        data: null,
    }, 
    mutations: {
        setOptions (state, payload) {
            console.log(payload);
        } 
    },
    actions: { 
        load( { commit }) {
            $.getJSON('options')
            .then(function (data) {
                commit('setOptions', data);
            });
        }
    },
    getters: {

    }

}

내 앱 컴포넌트:

export default {
    beforeCreate() {
         this.$store.dispatch('load');
    }
}

내 vue 빌드:

new Vue({
    el: "#app",
    router,
    store,
    render: h => h(App)
});

vuex의 mapActions 도우미 사용을 검토하겠습니다.이에 대한 매뉴얼은http://https://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components 에서 구할 수 있습니다.

이 페이지의 예는 다음과 같습니다.

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // map `this.increment()` to `this.$store.dispatch('increment')`

      // `mapActions` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // map `this.add()` to `this.$store.dispatch('increment')`
    })
  }
}

나는 하는 대신에 문제를 해결한다.

 let options = require('./store/options.js');

나는 했다:

import options from './store/options.js'

이제 작동한다

언급URL : https://stackoverflow.com/questions/44608464/how-to-access-vuex-module-actions-from-a-component