基于VUEX的组件的Vue渲染getter

Question

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

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

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

}

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

Answer 1

你必须使用计算而不是数据，因为创建组件时数据只执行一次。这应该有效

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

More about computed

基于VUEX的组件的Vue渲染getter

Vue Rendering of component based on VUEX getter

vue.js

vue-component

vuex