vuex unknown action type: Nuxtjs

Question

I'm trying to fetch an action in a fetch hook in a pagee of my nuxt application but I get [vuex] unknown action type error. This is my folder setup:

This is my store/index.js:

import vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import Vue from "vue";

import liveEvents from "./liveEvents";

Vue.use(Vuex, axios);

const store = () => {
  return new Vuex.Store({
    modules:{
      liveEvents
    }
  })
}

export default store

this is my store/liveEvents/index.js:


const state = () => ({
  eventsList: []
});

const actions = () => ({
  async eventsList({ commit }) {
   // the actions ...
  },
 
const mutations = () => ( {
  SET_EVENTLIST(state, events) {
    state.eventsList = events;
  },
 
const getters = () => ({
});

export default {
  namespaced: true,
  state,
  actions,
  mutations,
  getters
}

And this is how I call it in my page:

async fetch() {
  const { store, error } = this.$nuxt.context;
  try {
    await store.dispatch("liveEvents/eventsList", null, { root: true });
  } catch (e) {
    error({
      message: "error"
    });
  }
}

And this is the error I get:

[vuex] unknown action type: liveEvents/eventsList

How can I fix this error?

tony19 · Accepted Answer · 2021-03-30 23:45:53Z

3

Nuxt automatically transforms store/**/*.js files into Vuex modules, so you don't need to setup your own store in store/index.js, and it should be removed.

Also, your actions, mutations, and getters currently return a function that returns an object, but that should only be done for state. Instead, they should be objects:

// store/liveEvents/index.js
export const state = () => ({
  eventsList: []
});

export const actions = {
  async eventsList({ commit }) {
    // the actions ...
  },
}

export const mutations = {
  SET_EVENTLIST(state, events) {
    state.eventsList = events;
  },
}

export const getters = {
}

edited Mar 30, 2021 at 23:45

answered Mar 30, 2021 at 23:28

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuex unknown action type: Nuxtjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related