CODEWITHSUNDEEP
javascriptvue.jsvuex
Ashish
Ashish

Reputation: 4330

Vuex store change not updating the component

I am facing one issue, where after updating my store value isRenewalFlow my component is not getting updated.

On debugging I found component's updated life cycle is not getting called after mutation [MUTATION_TYPES.IS_RENEWAL_FLOW] updates store value. Even getIsRenewalFlow in store getter is only called once in the beginning and not after store update inside mutations.

Here's the code.

Store

const state = {
    isRenewalFlow: undefined,
}

const getters = {
    getIsRenewalFlow: (state) => state.isRenewalFlow,
}

const actions = {
    [ACTION_TYPES.POPULATE_QUOTE_DATA]: (
        { dispatch, commit, state, rootState, getters }, payload
    ) => {
            commit(MUTATION_TYPES.IS_RENEWAL_FLOW, payload)
         }
}

const mutations = {
    [MUTATION_TYPES.IS_RENEWAL_FLOW]: (state, payload) => {
        state.isRenewalFlow = payload
    },
}

Component

export default Vue.extend({
    components: {
        ErrorBoundary: () => import('@/components/common/ErrorBoundary.vue'),
    },
    computed: {
        ...mapGetters({
            getIsRenewalFlow: 'getIsRenewalFlow',
        }),
   },
    mounted() {
       this.getIsRenewalFlow !== undefined &&
        someFunc()
    },
    updated() {
        this.getIsRenewalFlow !== undefined &&
        someFunc()
    },
})

someFunc is never getting called even after updating state.isRenewalFlow with true or false inside mutations [MUTATION_TYPES.IS_RENEWAL_FLOW]

Upvotes: 0

Views: 720

Answers (1)

Marcelo
Marcelo

Reputation: 2534

updated hook is related to changes in the DOM, if this state is not updating the DOM you won't see updated being called.

From https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram:

enter image description here

Upvotes: 1

Related Questions