vuex 未知动作类型：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?

Answer 1

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 = {
}