How do I change data automatically through vuex store on the vue component?

Question

I have two component

My first component like this :

<template>
    ...
        <ul class="dropdown-menu">
            <li v-for="club in clubs"><a href="javascript:" @click="selectClub(club)">{{club.name}}</a></li>
        </ul>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">
                <span @click="saveClub()">Ok</span>
            </button>
        </span>
    ...
</template>
<script>
    import {mapActions} from 'vuex'
    export default {
        data() {
            return {
                clubs: [
                    {"id":1, "name":"chelsea", "coach":"conte", "stadium":"stamford bridge"},
                    {"id":2, "name":"manchester", "coach":"mourinho", "stadium":"old traford"},
                    {"id":3, "name":"liverpool", "coach":"klopp"," stadium":"anfield"}
                ],
                clubSelected: {}
            }
        },
        methods: {
            selectClub(club) {
                this.clubSelected = club
            },
            saveClub() {
                this.setClub(this.clubSelected)
            },
            ...mapActions(['setClub'])
        }
    }
</script>

My second component like this :

<template>
    <div>
        <button v-if="!getClub" type="button" class="btn btn-default">
            <span class="fa fa-map-marker"></span> Select Club
        </button>
        <div v-else class="dropdown">
            <button class="btn btn-default" type="button">
                <span class="fa fa-map-marker"></span> {{getClub.name}}
            </button>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    export default {
        computed: {
            ...mapGetters(['getClub'])
        }
    }
</script>

Both components are connected via the modules vuex store

My modules vuex like this :

import { set } from 'vue'
...
const CART_KEY = 'clubApp'

// initial state
const state = {
    status: null,
    club: JSON.parse(localStorage.getItem(CART_KEY)),
}
// getters
const getters = {
    getClub: state => state.club
    getStatus: state => state.status
}
// actions
const actions = {
    setClub ({ commit, state }, club)
    {
        // Check browser support
        if (typeof(Storage) !== "undefined") {
            //update club local storage
            localStorage.setItem(CART_KEY, JSON.stringify(club))
            commit(types.SET_CLUB_SUCCESS,{ club });
        }
        else 
            commit(types.SET_CLUB_FAILURE)
    }
}
// mutations
const mutations = {
    [types.SET_CLUB_SUCCESS] (state){
        state.status = 'success'
    },
    [types.SET_CLUB_FAILURE] (state){
        state.status = 'failure'
    }
}
export default {
    state,
    getters,
    actions,
    mutations
}

If I click Ok button, it will call saveClub method. Then it will call setClub method on the modules vuex. Then it will store data in local storage

I want when the user changes the club, it will update automatically. My code is not yet automatic. When the user changes the club, it does not update automatically

How can I solve this problem?

Note :

I want this code :

<span class="fa fa-map-marker"></span> {{getClub.name}} 

always change if there is a club change

Answer 1

In this context, you did not change the 'club' state. Hence, vuex did not trigger the changes to Vue components.

Here's is the sample code that should be working:

Your vuex module:

...
// mutations
const mutations = {
    [types.SET_CLUB_SUCCESS] (state, { club }){ // Added argument to the mutator
        state.status = 'success'
        state.club = club // Added this line, this is where you mutate the 'club' state, making vuex to trigger changes to Vue components
    },
    [types.SET_CLUB_FAILURE] (state){
        state.status = 'failure'
    }
}
...