基于 VueX getter 的组件的 Vue 渲染答案

【问题标题】：Vue Rendering of component based on VUEX getter基于 VueX getter 的组件的 Vue 渲染
【发布时间】：2021-04-20 23:57:14
【问题描述】：

我有这段代码来渲染我的主屏幕。我想根据从 vuex 商店获得的值来渲染组件。

一切都很好。发生突变时组件未重新加载的问题。有什么建议吗？

<template>

<component v-bind:is = "showDashboard" > </component>
 
</template>

<script>
import AllOrganizationDashboard from "../components/AllOrganizationDashboard"
import OrganizationDashboard from "../components/OrganizationDashboard"
import ProjectDashboard from "../components/ProjectDashboard"
export default {
  components: {


AllOrganizationDashboard,OrganizationDashboard,ProjectDashboard,
  }, 
  data(){
    return {
      
      showDashboard: this.$store.getters.getcurrentDashboardToShow,
    }
  }

}

我希望有一个简单的方法，并且我不需要重新构建我的组件。

【问题讨论】：

标签： vue.js vue-component vuex

【解决方案1】：

您必须使用计算而不是数据，因为数据仅在创建组件时执行一次。这应该工作

computed: {
  showDashboard() {
    return this.$store.getters.getcurrentDashboardToShow
  }
}

More about computed

【讨论】：

我真的很希望，但我得到了这个错误。 TypeError: $options.showDashboard 不是函数
看起来你在调用它就像模板中的一个方法？它应该只是 v-bind:is="showDashboard" 没有括号。