Encontrando un problema con Vuex 4.0.2 donde arroja un error no detectado que indica que un getter específico debería ser una función, aunque de hecho es una función.
Error: Uncaught Error: [vuex] getters should be function but "getters.teamsWithPlayers" is [].
Vue 3.2.31
store/index.js
const getters = { teamsWithPlayers (state) { if (state.game.teams === undefined) { return state.game.teams } const teamsWithPlayersList = [] state.game.teams.forEach(function (team) { const individualScores = [] team.players = state.game.players.filter(player => team.name === player.team) team.players.forEach(function (player) { individualScores.push(player.score) }) team.score = individualScores.reduce(function (a, b) { return a + b }, 0) teamsWithPlayersList.push(team) }) return teamsWithPlayersList } } export default createStore({ namespaced: true, state, mutations, actions, getters }) ~Encontré que el problema estaba relacionado con la creación de la aplicación Vue en main.js Mientras actualizaba un proyecto existente de Vue 2 a Vue 3, había una referencia a la instanciación del objeto Vuex anterior que no entendí.
El main.js. incorrecto.
import { createApp } from 'vue' import Vuex from 'vuex' import App from './App.vue' import router from './router' import store from '@/store' import '@/assets/styles/reveal_theme.scss' const vuexStore = new Vuex.Store(store) const app = createApp(App).use(router).use(vuexStore) app.mount('#app') Esto se soluciona eliminando las referencias al antiguo Vuex.Store .
main.js corregido:
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from '@/store' const app = createApp(App).use(router).use(store) app.mount('#app')