vuex 未知动作类型：events/loadAll

Question

我希望有人能帮助我。我将所有模块从 store/index.js 文件移动到一个新的 store/events.js 文件以进行清理。我在为来自 event.js 的 loadAll 操作获取正确的命名空间时遇到问题。不确定我在这里遗漏了什么，因为我遵循了一些文档并相信这应该是正确的。我在尝试使用“this.$store.dispatch('events/loadAll')”获取 loadAll 操作的地方包含了 App.js。您可以看到 loadCurrent 操作也以类似的方式分派并且工作得很好。任何帮助将不胜感激。

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import snackbarModule from './snackbar';
import eventsModule from './events';
import usersModule from './users';

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    snackbar: snackbarModule,
    eventNames: eventsModule,
    users: usersModule
  }
})

event.js

import Api from "../service/api"

export default {
  namespaced: true,
  state: {
    eventNames: [],
  },
  mutations: {
    SET_EVENTNAMES(state, eventNames) {
        state.eventNames = eventNames
    }
  },
  actions: {
    async loadAll({commit}){
        let response = await Api().get('/event-names')
        let eventNames = response.data.data
        eventNames.forEach(e => {
          e.attributes.id = e.id
        })
        commit('SET_EVENTNAMES', eventNames.map(e => e.attributes))
    }
  }
}

App.vue

<script>
import { mapState } from 'vuex';
  export default {
    name: 'App',
    created(){
        this.$store.dispatch('events/loadAll');
        this.$store.dispatch('users/loadCurrent');
    },
    computed: {
    ...mapState({
      currentUser: state => state.users.currentUser,  
      snackbars: state => state.snackbar.snackbars
    })
    },
    data: () => ({ 
      drawer: null,
      items: [
        { title: 'Schedule', icon: 'mdi-calendar-month', to: '/' },
        { title: 'Results', icon: 'mdi-calendar-check', to: '/Results' },
        { title: 'Points', icon: 'mdi-format-list-numbered', to: '/Points' },
        { title: 'About', icon: 'mdi-help-box', to: '/About' },
      ],
    }),
    methods: {
    logoutUser() {
      this.$store.dispatch("users/logout");
    }
  },
  }
</script>

Answer 1

我可以在 index.js 中看到以下行：
```
import eventsModule from './events';
```
但是您列出了 event.js 文件。这是一个错字吗？ events.js的内容你列出了吗?

如果你想调用动作 this.$store.dispatch('events/loadAll') 你必须更改模块名称：

...

export default new Vuex.Store({
  modules: {
    snackbar: snackbarModule,
    events: eventsModule, // <- change the key name to 'events'
    users: usersModule
  }
})

Answer 2

我想这个问题已经有了答案，虽然有一些注意事项我想指出。

为了提高代码的可读性，您应该使用正确的助手。因此，一个好的做法是使用 mapGetters 和 mapActions 而不是使用 mapState。

所以重构你的代码就像 Max 更正：

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import snackbarModule from './snackbar';
import eventsModule from './events';
import usersModule from './users';

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    snackbar: snackbarModule,
    events: eventsModule, // <-module name correction
    users: usersModule
  }
})

// events.js <- filename correction
import Api from "../service/api"

export default {
  namespaced: true,
  state: {
    eventNames: [],
  },
  
  getters: {
    GET_EVENTNAMES: (state) => state.eventNames // use getters instead of using state to prevent mutations in the state
  },

  mutations: {
    SET_EVENTNAMES(state, eventNames) {
        state.eventNames = eventNames
    }
  },

  actions: {
    async loadAll({commit}){
        let response = await Api().get('/event-names')
        let eventNames = response.data.data
        eventNames.forEach(e => {
          e.attributes.id = e.id
        })
        commit('SET_EVENTNAMES', eventNames.map(e => e.attributes))
    }
  }
}

// App.vue
<script>
import { mapGetters, mapActions } from 'vuex';

  export default {
    name: 'App',
    created(){
        this.loadAll(); // called from methods/mapActions
        this.loadCurrent(); // called from methods/mapActions
    },
    computed: {
      ...mapGetters({
        currentUser: 'users/currentUser',  
        snackbars: 'snackbar/snackbars'
      })
      ...mapGetters('events', [ // Can be used as an Array or as an Object
        'GET_EVENTNAMES'
      ])
    },
    data: () => ({ 
      drawer: null,
      items: [
        { title: 'Schedule', icon: 'mdi-calendar-month', to: '/' },
        { title: 'Results', icon: 'mdi-calendar-check', to: '/Results' },
        { title: 'Points', icon: 'mdi-format-list-numbered', to: '/Points' },
        { title: 'About', icon: 'mdi-help-box', to: '/About' },
      ],
    }),
    methods: {
      ...mapActions('users', [ // Can be splited by modules or all together removing the module parameter ('users')
        'logout',
        'loadCurrent'
      ]),
      ...mapActions('events', [
        'loadAll'
      ]),
      logoutUser() {
        this.logout(); // Can be used as an Array or as an Object
      }
    },
  }
</script>

vuex 未知动作类型：events/loadAll

vuex unknown action type: events/loadAll

vue.js

vuejs2

vuetify.js

vuex

vuex-modules