Vuex 存储更改不更新组件答案

【问题标题】：Vuex store change not updating the componentVuex 存储更改不更新组件
【发布时间】：2019-09-01 18:49:25
【问题描述】：

我面临一个问题，在更新我的商店价值isRenewalFlow 后，我的组件没有得到更新。

在调试时我发现组件的updated 生命周期在突变[MUTATION_TYPES.IS_RENEWAL_FLOW] 更新存储值后没有被调用。甚至getIsRenewalFlow in store getter 也只在开始时调用一次，而不是在突变内部的 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
    },
}

组件

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

即使在使用true 或false 内部mutations [MUTATION_TYPES.IS_RENEWAL_FLOW] 更新state.isRenewalFlow 之后，someFunc 也永远不会被调用

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

updated 钩子与 DOM 的变化有关，如果此状态未更新 DOM，您将不会看到 updated 被调用。

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

【讨论】：