尝试对Vuex存储命名空间并获取mapActions()中未找到的模块命名空间:groups /:

时间:2020-04-14 14:29:24

标签: vue.js namespaces vuex vuex-modules

我有一个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 /

0 个答案:

没有答案