父组件的计算属性不响应由子组件引起的存储状态更改

Question

我的父组件有一个名为showMainBanner的计算属性，它包含一个存储状态：

computed: {
  showMainBanner () {
    return this.$store.state.config.showMainBanner
  }
}

用户点击后，我的子组件会更改此存储状态，从而：

this.$store.commit('config/SET_BANNER_STATUS', 'false')

...哪个指向商店的这一部分：

export const state = () => ({
  showMainBanner: true,
})

export const mutations = {
  SET_BANNER_STATUS (state, config) {
    state.showMainBanner = config
  }
}

存储状态更改成功，但我的父组件的计算属性showMainBanner不会对该存储更改做出反应。

为什么不？

Answer 1

只是改变：

this.$store.commit('config/SET_BANNER_STATUS', 'false')

至：

this.$store.commit('config/SET_BANNER_STATUS', false)