我有一个可重用的视频组件。js视频播放器。当数据在初始DOM加载时传入时,该组件工作正常。

我需要弄清楚为什么我的组件在Vuex中更新状态后没有重新渲染。

父组件通过道具传递视频数据。我也有这套可以用于多个视频,它可以很好地用于一个或多个视频。

<div v-for="video in videos" :key="video.id">
  <video-player :videoName="video.videoName" :videoURL="video.videoURL" :thumbnail="video.thumbnail"></video-player>
</div>

我正在为Vuex商店中的所有用户将初始状态设置为通用视频。

getFreeVideo: [
  {
    videoName: "the_video_name",
    videoURL:  "https://demo-video-url.mp4",
    thumbnail: "https://s3.amazonaws.com/../demo-video-poster.jpg"
  }
]

这是在中的数据中设置的 videos (稍后设置为getFreeVideo)

 data () {
   return {
     videos: []
   }
 }

我正在设置 视频 在创建的()生命周期内,在data()中获取存储中的免费视频:

    this.videos = this.getFreeVideo

。。以及检查用户是否有个人视频,并更新created()生命周期中的状态。

 this.$store.dispatch('getFreeVideo', 'the_video_name')

这会向axios发出请求并成功返回视频数据。

我正在使用mapState import { mapState } from 'vuex 观察状态变化。

 computed: {
  ...mapState(['getFreeVideo'])
}

我不明白为什么 this.videos 未更新。 在这里,我对预期行为的假设是 videos[] 正在根据组件的状态更改和重新渲染进行更新。

如下所示,状态已更新,并且 videoUpdate() 在计算属性中也有新数据:

。。但是 视频[] 从未更新,因此视频组件从未获得道具新道具等。。

几点注意事项:

• 已尝试使用隐藏子组件 v-if (状态改变后显示)
• 尝试 setTimeout 但是数据会通过,然后videoJS播放器永远不会正确实例化 (必须有初始数据)
• 尝试使用本地方法执行此操作/未使用Vuex状态
• 控制台显示错误 TypeError: Cannot read property '_withTask' of undefined 但即使演示视频加载正确,也会发生这种情况,因此这似乎不相关,我在这里找不到任何显示为未定义的内容。

TL;DR公司

我基本上无法让子组件在状态更改后重新渲染。 虽然我可以把数据 视频[] 使用不同的结构,它仍然不会重新渲染。

为什么数据无法通过,而重新渲染从未发生?

请不要发布只包含“了解反应性”链接或其他没有任何解释的答案。 ðŸ˜

为@acdcjunior追加

//action   
getFreeVideo: (context, videoName) => {
    axios({
      method: 'post',
      url: 'https://hidden-for-posting',
      data: {
        action: 'getVideo',
        userId: '1777', // (hardcoded to test)
        videoName: videoName
      },
      headers: {
        'x-api-key': apiKey,
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      let video = [
        {
          videoName: response.data.videoName,
          videoURL: response.data.videoURLs.mp4,
          thumbnail: response.data.thumbnails['1280']
        }
      ]
      return context.commit('updateGetFreeVideo', video)
    })
    .catch(error => {
      if (error.response) {
        console.log(error.response)
      } else if (error.request) {
        console.log(error.request)
      } else {
        console.log('Error', error.message)
      }
      console.log(error.config)
    })
}

// mutation:
updateGetFreeVideo: (state, payload) => {
  return state.getFreeVideo = payload
}

// getter:
getFreeVideo: state => {
  return state.getFreeVideo
}