[Vuejs]-Vuex unknown action type: events/loadAll

by

0👍

✅

  1. I can see the following row in the index.js:

    import eventsModule from './events';

    But you listed the event.js file. Is this a typo? Have you listed the content of the events.js?

  2. If you want to call the action as this.$store.dispatch('events/loadAll') you have to change the module name:

    ...

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

0👍

I think this question is already answered, although there are some note that i want to point out.

To improve your code readability, you should use the right helper. So a good practice to follow is the use of mapGetters and mapActions instead of using mapState.

So refactoring your code it would be like with Max corrections:

// 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>

Leave a comment