NOTE: at the bottom of this answer, see the general point I make about update/reactivity issues with Vue.
Now, about the question, based on the code you posted, considering the template:
<div v-for="video in videos" :key="video.id">
It picks the videos from:
data () {
return {
videos: freeVideo
}
}
Although it initializes from freeVideo, in nowhere in your code you show an update of videos.
Solution:
You already have the state mapped in the getFreeVideo computed:
computed: {
...mapState(['getFreeVideo'])
}
Use it:
<div v-for="video in getFreeVideo" :key="video.id">
Update:
I’m setting
videosin data() to getFreeVideo in the store within the
created() lifecycle:this.videos = this.getFreeVideo
This is not enough to keep this.videos updated with whatever this.getFreeVideo is. Whenever something is set to this.getFreeVideo it will only change this.getFreeVideo, not this.videos.
If you want to automatically update this.videos whenever this.getFreeVideo changes, create a watcher:
watch: {
getFreeVideo() {
this.videos = this.getFreeVideo
}
}
And then keep using videos in the v-for:
<div v-for="video in videos" :key="video.id">
Vue’s reactivity
All explanation below applies to Vue2 only. Vue3 doesn’t have any of these caveats.
If your state is not getting updated in the view, perhaps you are not exploring Vue at its best:
To have Vue automatically react to value changes, the objects must be initially declared in
data. Or, if not, they must be added usingVue.set().
See the comments in the demo below. Or open the same demo in a JSFiddle here.
new Vue({
el: '#app',
data: {
person: {
name: 'Edson'
}
},
methods: {
changeName() {
// because name is declared in data, whenever it
// changes, Vue automatically updates
this.person.name="Arantes";
},
changeNickname() {
// because nickname is NOT declared in data, when it
// changes, Vue will NOT automatically update
this.person.nickname="Pele";
// although if anything else updates, this change will be seen
},
changeNicknameProperly() {
// when some property is NOT INITIALLY declared in data, the correct way
// to add it is using Vue.set or this.$set
Vue.set(this.person, 'address', '123th avenue.');
// subsequent changes can be done directly now and it will auto update
this.person.address="345th avenue.";
}
}
})/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }<script src="https://unpkg.com/vue@2"></script>
<div id="app">
<span>person.name: {{ person.name }}</span><br>
<span>person.nickname: {{ person.nickname }}</span><br>
<span>person.address: {{ person.address }}</span><br>
<br>
<button @click="changeName">this.person.name="Arantes"; (will auto update because `name` was in `data`)</button><br>
<button @click="changeNickname">this.person.nickname="Pele"; (will NOT auto update because `nickname` was not in `data`)</button><br>
<button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button>
<br>
<br>
For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>To master this part of Vue, check the Official Docs on Reactivity – Change Detection Caveats. It is a must read!