vuex 未知动作类型：Nuxtjs答案

【问题标题】：vuex unknown action type: Nuxtjsvuex 未知动作类型：Nuxtjs
【发布时间】：2021-06-26 23:34:04
【问题描述】：

我正在尝试在我的 nuxt 应用程序的页面中的 fetch 挂钩中获取操作，但我收到 [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

我该如何解决这个错误？

【问题讨论】：

标签： javascript vue.js fetch nuxt.js vuex

【解决方案1】：

Nuxt 自动transforms store/**/*.js files into Vuex modules，所以你不需要在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 = {
}

【讨论】：