如何在商店有數據時調用函數

我必須創建視頻播放器對象，但我需要流對象存在之前我創建了視頻播放器。如何在商店有數據時調用函數

this.stream由vuex數據存儲填充。但我發現mounted()和created()方法不會等待存儲數據存在。

這裏是Player.vue組件：

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在場？

來源

2017-09-04 chovy

你能發佈行動'types.STREAMS_GET_STREAM'的代碼嗎？ –

可能的重複https://stackoverflow.com/questions/45888111/alternative-for-setting-the-srcobject/45894603#45894603有一個觀察者的解決方案。這應該滿足您的需求。 – Reiner

您可以訂閱突變事件，例如，如果您的商店中存在名爲setStream的突變，您應該訂閱此突變。以下是如何在掛載方法中訂閱的代碼片段。

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

來源

2017-09-04 21:12:49

如何在商店有數據時調用函數

回答

相關問題