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

Asked By: Anonymous

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


Solution

Answered By: Anonymous

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'
    }
}
...

Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen Windows 10 Lisans Office 2019 Mac Satın Al follower kaufen instagram follower kaufen porno