Encountering a problem with Vuex 4.0.2 where it throws an uncaught error indicating that a specific getter should be a function, even though it is indeed a function.
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
})
~
Found the issue was with the creation of the Vue app in main.js. As I was upgrading an existing project from Vue 2 to Vue 3, there was a reference to the old Vuex object instantiation that I did not catch.
The incorrect main.js.
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')
This is fixed by removing the references to the old Vuex.Store.
Corrected main.js:
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')