Блог

Я пытаюсь выполнить действие в крючке выборки на странице моего приложения nuxt, но получаю [vuex] unknown action type ошибку. Это настройка моей папки:

Это мой 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
 

это мой 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
}  
 

И вот как я называю это на своей странице:

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

И вот какую ошибку я получаю:

 [vuex] unknown action type: liveEvents/eventsList 
 

Как я могу исправить эту ошибку?

Nuxt автоматически преобразует store/**/*.js файлы в модули Vuex, поэтому вам не нужно настраивать собственное хранилище store/index.js , и его следует удалить.

Кроме того, ваш actions , mutations , и getters в настоящее время возвращает функцию, которая возвращает объект, но это должно быть сделано только для state . Вместо этого они должны быть объектами:

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