使用 vuex getter 重新渲染组件

Question

I'm trying to force a component to re-render. After reading about this, I decided to use key to force re-render. My key is a value from the store, and then I commit a mutation where it increments the value of the key. But my components doesn't re-render. What am I doing wrong?

My component call:

<div class="firstTab" v-else-if="activeFormStep === 1 && !isLoading">
   <AgenciesSelectionStep
             ref="agenciesSelectionStep"
            :key="agenciesSelectionStepKey"
    ></AgenciesSelectionStep>
</div>

Getters:

computed: {
            ...mapGetters(['modificationFormType', 'globalLoaderUpMessage', 'globalLoaderDownMessage', 'agenciesSelectionStepKey']),
        }

Store State:

const state = {
    agenciesSelectionStepKey: 20,
};
const getters = {
    agenciesSelectionStepKey: state => state.agenciesSelectionStepKey,
};

Store mutation;

[CHANGE_COMPONENT_KEY]: (state, payload) => {
        state[payload.componentKeyName] += 1;
}

Answer 1

This a long shot but you could try it. I hade a similar problem. Are you calling the mutation from an action or directly from the component?

const state = {
    SelectionStepKeys: {
        agenciesSelectionStepKey: 20
    },
};

const getters = {
    getSelectionStepKey: state => (key) => {
        return state.SelectionStepKeys[key]
    }
};

Mutation

IncrementKey: (state, {key}) => {
    state.SelectionStepKeys[key] += 1;
    state.SelectionStepKeys = {...state.SelectionStepKeys}
 }