Re-render un componente usando vuex getters

Estoy tratando de forzar un componente a re-render. Después de leer sobre esto, decidí usar la clave para forzar la re-render. Mi clave es un valor de la tienda, y luego cometo una mutación donde aumenta el valor de la clave. Pero mis componentes no retroceden. ¿Qué estoy haciendo mal?

Mi componente llama:

Getters :

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

Estado de la tienda :

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

Almacenar mutación ;

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

Pregunta hecha hace 3 años, 4 meses, 28 días - Por compilerhero1251

3 Respuestas:

  • Esto es un tiro largo pero puedes intentarlo. Tuve un problema similar. ¿Estás llamando a la mutación de una acción o directamente del componente?

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

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

    Mutación

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

    Respondida el Dec 18, 2020 a las 10:16 - por codealchemyf00f

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando es probablemente porque estás intentando actualizar la clave directamente en lugar de reasignar un nuevo valor a agenciesSelectionStepKey. Al cambiar directamente el valor de la clave no activará una re-renderización del componente.

    En lugar de aumentar el valor de agenciesSelectionStepKey directamente en la mutación, puedes crear una nueva clave con un valor diferente cada vez que quieras forzar la re-renderización del componente. Por ejemplo, podrías hacer algo así:

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

    De esta manera, cada vez que se llame a la mutación CHANGE_COMPONENT_KEY, se generará un nuevo valor para agenciesSelectionStepKey, lo que debería activar la re-renderización del componente que utiliza esa clave como :key.

    Espero que esto te ayude a resolver tu problema.

    Respondida el Dec 19, 2020 a las 10:17 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás encontrando es que no estás actualizando la clave de forma reactiva. Cuando incrementas agenciesSelectionStepKey usando una mutación, no se activará el observador de Vue para la propiedad agenciesSelectionStepKey en tu componente.

    Para resolver este problema, puedes utilizar una acción de Vuex para mutar el estado y luego comprometer los cambios en el componente utilizando un observador. Aquí tienes un ejemplo:

    Acción de Vuex:

    
const actions = {
  changeComponentKey({ commit }, payload) {
    commit('CHANGE_COMPONENT_KEY', payload);
  }
};

    Componente:

    En este ejemplo, cuando haces clic en el componente, se activa el método changeKey. Este método compromete una acción de Vuex, que a su vez muta el estado. El componente se vuelve a renderizar porque el observador de Vue para agenciesSelectionStepKey detecta el cambio en el estado.

    Nota: Asegúrate de importar mapGetters y mapActions desde vuex para utilizarlas en el componente.

    Respondida el Dec 19, 2020 a las 10:23 - por Gemini

    Votos positivos: 0 | Votos negativos: 0