我面临一个问题,更新我的存储值 isRenewalFlow
后,我的组件没有更新。
在调试时,我发现在突变[MUTATION_TYPES.IS_RENEWAL_FLOW]
更新存储值后组件的更新
生命周期没有被调用。即使存储 getter 中的 getIsRenewalFlow
也仅在开始时调用一次,而不是在突变内的存储更新之后调用。
这是代码。
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()
},
})
即使在 内使用 true
或 false
更新 state.isRenewalFlow
后,someFunc
也永远不会被调用突变
[MUTATION_TYPES.IS_RENEWAL_FLOW]
最佳答案
updated
钩子(Hook)与 DOM 中的更改相关,如果此状态未更新 DOM,您将不会看到 updated
被调用。
来自https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram :
关于javascript - Vuex 存储更改未更新组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55627325/