使用 vuex getter 重新渲染组件答案

【问题标题】：Re-render a component using vuex getters使用 vuex getter 重新渲染组件
【发布时间】：2021-03-28 23:48:15
【问题描述】：

我试图强制一个组件重新渲染。在阅读了这个之后，我决定使用 key 来强制重新渲染。我的键是来自商店的值，然后我提交了一个突变，它增加了键的值。但是我的组件不会重新渲染。我做错了什么？

我的组件调用：

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

吸气剂：

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

存储状态：

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

存储突变；

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

【问题讨论】：

标签： vue.js

【解决方案1】：

这是一个很长的镜头，但您可以尝试一下。我有一个类似的问题。您是从操作调用突变还是直接从组件调用突变？

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

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

变异

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

【讨论】：