Vue 子组件无反应

Question

在具有 Vuex 存储的应用程序中，有一个

getQueryParams

getter，它返回一个包含传递给数据库查询的参数的对象。如果有任何参数（即用户查询了某些内容），那么我想在页面上显示一个横幅，指示他们做了什么（除其他外）。最初我通过在页面中添加以下内容来处理这个问题：

<v-row
  v-if="Object.keys(getQueryParams).length >= 1"
>
  <!-- various elements including a v-alert... -->
</v-row>

还有：

computed: {
  ...mapGetters("queryStore", ['getQueryParams']),
 ...
}

而且，在商店里：

const getters = {
  getQueryParams(state) {
    return state.queryParams;
  },
  ...
}

这符合预期，导致横幅在商店更改时出现。 后来，需要在多个地方使用它，我将其移动到一个单独的 QueryBanner 组件。此时，当 getQueryParams 的结果发生更改时，横幅停止出现。我可以使用 Vue 开发工具看到商店的变化，但是例如新组件中的 console.log 显示 getQueryParams 的输出，但没有。为什么会这样？

Answer 1

Object.keys() 返回一个非反应性数组，因此不会重新评估它。 尝试创建另一个计算：

computed: {
  queryParamsExist () {
    return Object.keys(this.getQueryParams).length
  }
}

使用模板中计算的值：

<v-row v-if="queryParamsExist"> 
  <!-- various elements -->
</v-row>