저장소에 데이터가 있을 때 함수를 호출하는 방법

저장소에 데이터가 있을 때 함수를 호출하는 방법

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

그this.streamvuex 데이터 스토어에 의해 채워집니다만,mounted()그리고.created()메서드는 저장 데이터가 있을 때까지 기다리지 않습니다.

여기 플레이어가 있습니다.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참석하려고요?

돌연변이 이벤트에 가입할 수 있습니다. 예를 들어 스토어에 돌연변이가 있는 경우,setStream당신은 이 돌연변이에 가입해야 합니다.다음은 마운트된 메서드에서 구독하는 방법에 대한 코드 조각입니다.

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

언급URL : https://stackoverflow.com/questions/46040832/how-to-call-a-function-when-store-has-data