Suddenly I cannot manage to get a value from the vuex store. missing something trivial, but cannot see what ( me noob :( )

In my component I import mapstate:

<script>
import { mapState, mapActions } from 'vuex';

export default {
    mounted(){
        console.log('component mounted');
        
    },
    computed: {
        ...mapState([
        'currentSpeler' ,'currentSpelerCard', 'currentGame'
        ]), 
    },

In tyhe Vue-panel of the chrome console I see that the value currentGame exists.

I can get my script working when I use:

console.log("currentGame.id ="  this.$store.state.currentGame.id);

but when I use:

console.log("currentGame.id ="  this.currentGame.id);

I get an error:

Cannot read properties of undefined (reading 'id')

Does anyone see what I am missing?

CodePudding user response：

According to the Vuex Docs, the mapState helper returns an object by default.

You are importing your states in an array. You can use object instead of array.

computed: {
        ...mapState({
        currentSpeler: state => state. currentSpeler,
        currentSpelerCard: state => state.currentSpelerCard, 
        currentGame: state => state.currentGame
        }), 
    },

CodePudding user response：

I'd try to console log the currentGame and see what it looks like, then you can move on. My guess is that you somehow initialise the id parameter of currentGame while using the other component.