使用 vuex getter 重新渲染组件

Posted 2023-02-23

【中文标题】使用 vuex getter 重新渲染组件

【英文标题】：Re-render a component using vuex getters

【发布时间】：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;

【参考方案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