如何使用 vuex 存储值使组件可见，在父组件中使用 mapstate 和函数

Question

在游戏组件中，我必须组件：Memory 和 NamesByPictures。 可见性由 Vuex 存储参数的 v-if 依赖设置。

当玩家输入品脱时，它会被检查，当它正确时，memoryVisible 参数将设置为 true。 然而，当我在 Vue-devtools 中检查它时，它在商店中仍然是错误的。

这是我的脚本：

<template>
<div class="custom-container">

    <Memory v-if="memoryVisible"></Memory> 
    <NamesByPictures v-if="namesByPicturesVisible" ></NamesByPictures>

</div>
</template>

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

    export default{
    mounted(){    
    },
    computed: {
        ...mapState([ 'currentGame', 'memoryVisible', 'namesByPicturesVisible']),        
    },
    data(){
        return{
            enteredPin: 9999,
            pinCorrect:false,
            gameName: '',
            currentGameError:false,
            checked:false,
            errorMessage:'',
            successMessage:'',
        }
    },
    methods: {

        ...mapActions(['fetchGameCards']),


            checkPinExists(){
            this.$store.dispatch('retrieveGameByPin', this.enteredPin)
            .then(res =>  {
                this.currentGameError = false;    // dus als we hier zijn is er geen gameerror...
                this.memoryVisible=true;   
                this.checked= true;                  
            })  
            .catch(err => {
                this.currentGameError = true;
                console.error(err);
            })
                
        }
    }
}
</script>

和 state.js：

export default{
    cards:[],
    games:[],
    token:localStorage.getItem('access_token') || null,
    currentGame:{},
    currentSpeler:{},
    currentSpelerCard:{},
    gameCards:[],
    memoryVisible:false,
    namesByPicturesVisible:false

}

谁能解释这种行为？