使用vuex getters重新渲染组件

Question

我正试图强制组件重新渲染。在阅读了这篇文章之后，我决定使用key来强制重新渲染。我的密钥是存储中的一个值，然后我提交一个突变，它会增加密钥的值。但我的组件不会重新渲染。我做错了什么？

我的组件调用：

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

Getters：

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

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