时间戳

首页 > 解决方案 > 如何在其数据（和状态）完好无损的情况下重新渲染组件（Vue）？

javascript - 如何在其数据（和状态）完好无损的情况下重新渲染组件（Vue）？

问题描述

以下是我的代码的结构：父组件通过 v-if 指令在子组件中混洗，其中一个子组件使用状态来定义其数据。一切正常，除非我在子组件之间切换。当我回来时，由于状态已变为空，因此无法显示任何数据。

父组件：

<template>
  <div>
   <Welcome v-if="view==0" />
   <Courses v-if="view==1" /> //the component that I'm working on
   <Platforms v-if="view==2" />
  </div>
</template>

课程组成：

<template>
  <div>Content</div>
</template>

<script>
export default {
  name: 'Courses',
  computed: {
    ...mapState([
      'courses'
    ])
  },
  data () {
    return {
      courseList: [],
      len: Number,
    }
  },
  created () {
    console.log("state.courses:")
    console.log(this.courses)
    this.courseList = this.courses
    this.len = this.courses.length
  },
}
</script>

假设“视图”的默认值为 1，当我加载页面时，将显示“课程”组件（包含数据）。如果我单击一个按钮将“view”的值更改为 0，则会显示“Welcome”组件。但是，当我尝试返回“课程”组件时，课程组件已呈现，但缺少所有数据。

经过检查（通过控制台日志记录），我发现最初呈现“课程”组件时，状态被正确映射并且我可以使用它，但是如果我将“视图”更改为另一个值以呈现另一个组件然后更改它恢复到原始值，“课程”组件仍然呈现，但状态变为未定义或为空。

编辑：澄清。

标签： javascriptvue.jsvuex

解决方案

设置courseList为组件名称并使用<component> 并设置一些枚举

例如。

<template>
   <component :is="this.viewState" />
</template>
<script>
export default {
    // your stuff
    data() {
      return {
         viewState: 'Welcome',
      }
    },
    methods: {
      getComponent(stateNum) {
          const States = { '1': 'Welcome', '2': 'Courses', '3': 'Platforms' }
          Object.freeze(States)
          return States[stateNum]
      }
    },
    created() {
       // do your stuff here 
       const view = someTask() // someTask because I don't get it from where you're getting data
       this.viewState = this.getComponent(view)
    }
}
</script>

我实际上并没有正确理解，但在这里我给出了一些解决您问题的想法。

推荐阅读