스토어에 데이터가있을 때 함수를 호출하는 방법

Question

비디오 플레이어 개체를 만들어야하지만 스트림 개체가 있어야합니다. 전에 비디오 플레이어를 만듭니다.

this.stream은 vuex 데이터 저장소로 채워집니다. 하지만 mounted() 및 created() 메서드는 저장소 데이터가 존재할 때까지 기다리지 않습니다.

import Clappr from 'clappr'; 
import { mapActions, mapGetters } from 'vuex'; 
import * as types from '../store/types'; 

export default { 
    name: 'streams', 
    data() { 
    return { 
     player: null 
    }; 
    }, 

    computed: { 
    ...mapGetters({ 
     stream: types.STREAMS_RESULTS_STREAM 
    }), 

    stream() { 
     return this.$store.stream; 
    } 
    }, 

    methods: { 
    ...mapActions({ 
     getStream: types.STREAMS_GET_STREAM 
    }) 
    }, 

    mounted() { 
    this.getStream.call(this, { 
     category: this.$route.params.category, 
     slug: this.$route.params.slug 
    }) 
     .then(() => { 
     this.player = new Clappr.Player({ 
      source: this.stream.url, 
      parentId: '#player', 
      poster: this.stream.poster, 
      autoPlay: true, 
      persistConfig: false, 
      mediacontrol: { 
      seekbar: '#0888A0', 
      buttons: '#C4D1DD' 
      } 
     }); 
     }); 
    } 
}; 

존재하는 this.stream 기다릴 수있는 방법이 있나요 :

여기 Player.vue 구성 요소는 무엇입니까?

Answer 1

돌연변이 이벤트에 가입 할 수 있습니다. 예를 들어 setStream이라는 스토어에 돌연변이가있는 경우이 돌연변이를 구독해야합니다. 여기에 마운트 된 방법으로 구독하는 방법에 대한 코드 스 니펫이 있습니다.

mounted: function() { 
    this.$store.subscribe((mutation) => { 
    if (mutation.type === 'setStream') { 
     // Your player implementation should be here. 
    } 
    }) 
}