Vuex getter中的VueJs'过滤器不是函数'问题

Question

我对前端开发和 Vue js 完全陌生。我想在我的应用程序中加入状态管理。我可以使用来自我的 API 的响应设置状态，但是当我想使用过滤器函数 (getActiveLeagues) 过滤 getter 中的结果时，我收到一个错误“过滤器不是函数”，就好像结果不是数组一样，但我认为我用数组声明了我的状态：

const state = {
  leagues: [],
};

const getters = {
  getAllLeagues: (state) => state.leagues,
  getActiveLeagues: (state) => state.leagues.filter((league) => league.archivated === false),
};

const actions = {

  async getAllLeagues({ commit }) {
    const response = await axios.get(`${server.baseURL}/api/league`);
    console.log(response);
    commit('setLeagues', response);
  },
};

const mutations = {
  setLeagues(state, leagues) {
    state.leagues = leagues;
  },
};

export default {
  state,
  getters,
  actions,
  mutations,
};

我从 API 得到一个数组：

这是我的 Vuex.Store 调用的样子：

import Vue from 'vue';
import Vuex from 'vuex';
import posts from './modules/postModule';
import leagues from './modules/leagueModule';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    posts,
    leagues,
  },
});

以及状态观察的结果： 可能这是一个愚蠢的问题，因为我是新手，但我现在看不出有什么问题。 感谢您的帮助。

Answer 1

我实际上没有使用过模块，也不确定与平面 state 相比它是如何工作的。最好的办法是在 getter 内console.log(state) 以获得更好的视图。

与文档相比，我注意到的一件事是，您没有将状态声明为模块中的函数。例如：

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

参考：https://vuex.vuejs.org/guide/modules.html

编辑（响应您的新屏幕截图）

它看起来像 state.leagues.leagues 您正在寻找的东西（我猜是因为模块命名空间？），但即使 也不是一个数组，它是一个具有 data 属性的对象一个数组。

所以从这个开始：

commit('setLeagues', response.data);

我认为您的模块状态应该已经接收到它的命名空间子状态，因此您不必修改任何其他内容。但如果它仍然坏了，也试试这个，我很好奇：

getActiveLeagues: (state) => state.leagues.leagues.filter((league) => league.archivated === false),