vue.js - Vuex 不观察多个突变

Question

我正在尝试观察demandes我的 Sidebar组件中连续产生两个突变的状态。观察者只检测到第一个突变，而不是第二个。

商店/需求.js

import axios from "axios";

const state = {
    count_by_etat: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
    },
}

const getters = {
    count_by_etat: (state) => state.count_by_etat,
}

const mutations = {
    SET_COUNT_DEMANDES_BY_ETAT(state, payload) {
        state.count_by_etat = payload
    },
    DECREMENT_COUNT_BY_ETAT(state, payload) {
        state.count_by_etat[payload] -= 1
    },
    INCREMENT_COUNT_BY_ETAT(state, payload) {
        state.count_by_etat[payload] += 1
    },
}

const actions = {
    count_by_etat({commit}) {
        axios.get('/count_by_etat')
            .then(response => {
                let badge_count = response.data.data
                commit('SET_COUNT_DEMANDES_BY_ETAT', badge_count)
            })
            .catch(function (error) {
                console.error(error)
            })
    },
    decrement_count_by_etat({commit}, id_etat) {
        commit('DECREMENT_COUNT_BY_ETAT', id_etat)
    },
    increment_count_by_etat({commit}, id_etat) {
        commit('INCREMENT_COUNT_BY_ETAT', id_etat)
    },
    async update_count_by_etat({dispatch}, id_etat_to_decrement, id_etat_to_increment) {
        await dispatch('decrement_count_by_etat', id_etat_to_decrement)
        dispatch('increment_count_by_etat', id_etat_to_increment)
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

侧边栏.vue

<template>
    <v-navigation-drawer
            color="#f1ebeb"
            permanent
            app
            :expand-on-hover="$vuetify.breakpoint.xs || $vuetify.breakpoint.sm"
    >

        <v-list>
            <v-list-item
                    v-for="([icon, text, to, id_etat], i) in menuLabel()"
                    :key="i"
                    :to=to
            >
                <v-list-item-icon>
                    <v-badge v-if="count_by_etat[id_etat]" bordered overlap color="blue" :content="count_by_etat[id_etat]">
                    <v-icon>{{ icon }}</v-icon>
                    </v-badge>
                    <v-icon v-else>{{ icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                        <v-list-item-title>
                            {{ text }}
                        </v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>

</template>

<script>
    import {mapGetters} from "vuex";

    export default {
        name: "SideBar",
        data() {
            return {
                etats: [],
                badge_count: {}
            }
        },
        mounted () {
            this.$store.subscribe((mutation, state) => {
                if (mutation.type === 'SET_ETATS') {
                    this.etats = state.etats.etats
                }
            });

            this.$store.subscribe((mutation, state) => {
                if (mutation.type === 'SET_COUNT_DEMANDES_BY_ETAT') {
                    this.badge_count = state.demandes.count_by_etat
                }
            });
        },
        updated() {
            this.$store.subscribe((mutation, state) => {
                if (mutation.type === 'DECREMENT_COUNT_BY_ETAT') {
                    this.badge_count = state.demandes.count_by_etat
                }
            });
            this.$store.subscribe((mutation, state) => {
                if (mutation.type === 'INCREMENT_COUNT_BY_ETAT') {
                    this.badge_count = state.demandes.count_by_etat
                }
            });
        },
        watch: {
            count_by_etat(nv, ov) {
                console.log('watched')
                console.log(nv, ov)
                this.badge_count = this.$store.state.demandes.count_by_etat
            },
        },
        computed: {
            ...mapGetters([
                'count_by_etat'
            ])
        },
        methods: {
            menuLabel() {
                let path = this.pathTo()
                let items = []
                this.etats.map(function (v, i) {
                    items[i] = [v.icon, 'Demandes ' + v.nom, { name: path, params: { etat: v.id_etat } }, v.id_etat]
                })
                return items
            },
        }
    }
</script>

当我发送我的update_count_by_etat:this.$store.dispatch('update_count_by_etat', {decrement: 2, increment: 4})时，仅在我的侧边栏组件上检测到递减状态，而不是递增突变。

你知道出了什么问题吗？

标签： vue.jsvuexstoremutation