Question

我有两个组件

我的第一个组件是这样的：

<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>

我的第二个组成部分是这样的：

<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>

两个组件都通过模块vuex store

连接

我的模块vuex是这样的：

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
}

如果单击“确定”按钮，则会调用saveClub方法。然后它将在模块vuex上调用setClub方法。然后它会将数据存储在本地存储

中

我想当用户更改俱乐部时，它会自动更新。我的代码还没有自动化。当用户更改俱乐部时，它不会自动更新

我该如何解决这个问题？

注意：

我想要这段代码：

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

如果俱乐部有变化，总是会改变

Answer 1

在这种情况下，你没有改变俱乐部＆＃39;州。因此，vuex没有触发对Vue组件的更改。

以下是应该运行的示例代码：

您的vuex模块：

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

如何通过vue组件上的vuex store自动更改数据？

1 个答案: