Vuex 存儲更改不更新組件

Question

我面臨一個問題，在更新我的商店值isRenewalFlow后，我的組件沒有得到更新。

在調試時，我發現在突變[MUTATION_TYPES.IS_RENEWAL_FLOW]更新存儲值后沒有調用組件的updated生命周期。 甚至商店 getter 中的getIsRenewalFlow也只在開始時調用一次，而不是在突變內部的商店更新之后調用。

這是代碼。

店鋪

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

零件

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()
    },
})

即使在state.isRenewalFlow更新了true或false內部mutations [MUTATION_TYPES.IS_RENEWAL_FLOW]之后， someFunc也永遠不會被調用

Answer 1

updated鈎子與 DOM 中的更改有關，如果此狀態未更新 DOM，您將不會看到調用updated 。

來自https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram ：