我有一个vuex项目,其store.js文件已完全失控,因此我试图根据资源(例如组,用户等)将其分为模块。
当我尝试在例如groups模块中调度动作时,我得到了:
[vuex] unknown action type
这是我的模块:
import GroupsService from '@/services/GroupsService'
import InvitesService from '@/services/InvitesService'
export const state = {
currentGroup: {},
groupInvites: [],
groups: []
}
export const mutations = {
setCurrentGroup(state, group) {
state.currentGroup = group
},
setGroupInvites(state, groupInvites) {
state.groupInvites = groupInvites;
}
}
export const actions = {
createGroup({ commit }, group) {
return GroupsService.createGroup(group).then(() => {
commit('ADD_GROUP', group)
})
},
getUserGroups({ commit }) {
GroupsService.getGroups()
.then(resp => {
console.log('in store getUserGroups, this is usergroups: ', resp);
commit('setCurrentGroup', resp.data[0]);
});
},
getGroupInvites({ commit }, user) {
InvitesService.getAllUserInvitation(user.id)
.then(resp => {
console.log('in store, getGroupInvites,this is groupInvites: ', resp.data);
commit('setGroupInvites', resp.data);
});
}
}
export const getters = {
getGroupById: state => id => {
return state.groups.find(group => group.id === id)
}
}
以下是组件:
<template>
...
</template>
<script>
import moment from 'moment-strftime'
import _ from 'lodash'
import ActsService from '@/services/ActsService'
import { mapActions } from 'vuex'
export default {
name: "Leaderboard",
data() {
return {
lastUserAct: {}
}
},
computed: {
leaderboard () {
return this.$store.getters.leaderboard;
},
currentGroup () {
return this.$store.state.groups.currentGroup;
}
},
async mounted () {
await this.setCurrentGroup ();
this.getLeaderboard();
},
methods: {
...mapActions('groups', [
'getUserGroups'
]),
getLeaderboard: async function () {
console.log('in LeaderBoard, this is currentGroup: ', this.$store.state.groups.currentGroup.name)
this.$store.dispatch("updateLeaderboard", this.currentGroup);
},
moment: function (datetime) {
return moment(datetime);
}
,
async lastActByUser (leader_id) {
console.log('in Leaderboard, getting last act for user')
const response = await ActsService.fetchLastActByUser ({
userId: leader_id
});
this.lastUserAct = response.data
console.log('in Leaderboard, lastAct response: ', response.data)
},
async setCurrentGroup() {
console.log('settingCurrent Group')
this.getUserGroups
}
}
};
在我的总店里,我做
import * as groups from '@/store/modules/groups.js'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user,
groups
}
...
具体地说,已挂载的回调函数将调用此函数this.setCurrentGroup。该功能应该可以击中groups模块中的动作,但是那没有发生。
错误是:在mapActions()中找不到模块名称空间:groups /