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

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

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

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

我正在为Vuexstore 中的所有用户将初始状态设置为通用视频.

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

这是在videos (and later set to getFreeVideo)中的数据中设置的

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

在创建的()生命周期内，我将data()中的videos设为getFreeVideo:

    this.videos = this.getFreeVideo

..判断用户是否有个人视频，并更新created()生命周期中的状态.

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

这会向axios发出请求，并成功返回我们的视频数据.

我用mapState import { mapState } from 'vuex来观察状态的变化.

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

我不明白为什么this.videos没有被更新.

如下所示，状态已更新，计算(computed)属性中的videoUpdate()也有新数据:

几点注意:

• 已经try 过了，用v-if (and showing after state change)隐藏子组件
• try 了setTimeout次测试，但数据会通过，然后videoJS播放器永远无法正确实例化(must have initial data)
• try 使用本地方法执行此操作/未使用Vuex状态
• 控制台显示错误TypeError: Cannot read property '_withTask' of undefined，但即使演示视频加载正确，这种情况也会发生，所以这似乎不相关，我在这里找不到任何显示为未定义的内容.

TL;DR

我基本上无法让子组件在状态更改后重新渲染.

Why is the data not making it through, and the re-render never happening?

Please don't post answers that only contain links to 'understanding reactivity' or something without any explanation.?

appended for @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
}