Как получить доступ к действиям модуля Vuex из компонента

Я определяю хранилище с двумя модулями, и я пытаюсь получить доступ к одному действию модуля, я пытался сделать

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.js

 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 vuejs2
person Nati V    schedule 17.06.2017    source источник
comment
Что произойдет, если вы console.log(this.$store) зацепитесь за beforeCreate() {}? Должен быть объект _actions, показывающий все доступные действия.   -  person visevo    schedule 19.06.2017
comment
@visevo В этом свойстве не было свойств, но оно работает, когда я импортировал в параметры   -  person Nati V    schedule 20.06.2017

Ответы (2)


arrow_upward
0
arrow_downward

Я бы подумал об использовании помощника mapActions от vuex. Документацию по этому поводу можно найти на странице 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')`
    })
  }
}

person mjbryan10    schedule 24.03.2021

arrow_upward
-1
arrow_downward

Я решаю проблему вместо того, чтобы делать

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

Я сделал:

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

Теперь это работает

person Nati V    schedule 20.06.2017
comment
Отлично, я должен был это уловить. - person visevo; 20.06.2017