Как правильно будет выполнить dispatch action модуля склада?
В модулe склада laboratory.js
получаю данные из БД и сохраняю в переменную модуля.
import Vue from 'vue';
export default {
namespaced: true,
state: {
laboratories: null,
},
getters: {
getLaboratories(state){
return state.laboratories;
},
},
mutations: {
loadLaboratories(state, data){
state.laboratories = data;
}
},
actions: {
loadLaboratories(store){
// store.commit('clearLaboratory');
Vue.http.get('laboratories')
.then(response => response.json())
.then(data => {
store.commit('loadLaboratories', data);
});
},
}
};
В главном файле склада подключаю модуль
import laboratory from './modules/laboratory';
export const store = new Vuex.Store({
modules: {
laboratory,
},
...
Теперь я хочу вызвать action loadLaboratories
в одном из компонентов. Можно вызвать напрямую, если в модуле корзины прописать import Vue from 'vue';
this.$store.dispatch('laboratory/loadLaboratories');
Или же следует в компоненте сделать как-то так (смотри ниже).
import {mapActions} from 'vuex';
export default {
methods: {
...mapActions('laboratory', {
loadLaboratories: 'loadLaboratories',
})
},
...
И потом вызвать выполнение строкой this.loadLaboratories();
?
Как правильно? И ещё вопрос - как следует именовать методы в state, getters, mutations, actions и переменные внутри модулей? Например, в моё случае из БД я буду получать laboratories
(их будет несколько). Значит нужно всё именовать во множественном числе? Или в единственном?