Question

我有这个单选按钮代码显示在我正在处理的网站的标题部分

  <v-radio-group v-model="changeQualityVideo" :mandatory="false">
    <v-radio color="success" :name="1" :label="tt('Global')" :value="1" v-bind:class="[quality === 'hd' ? 'is--active' : '']"></v-radio>
    <v-radio color="success" :name="2" :label="tt('Local')" :value="2" v-bind:class="[quality === 'sd' ? 'is--active' : '']"></v-radio>
  </v-radio-group>

此功能的目的是设置视频源URL。如果用户选择全局，则当前页面的视频和网站其他视频的质量将为HD。如果用户选择本地，则当前页面的视频和网站其他视频的质量将为SD。

但是，我似乎无法使我的计算属性使URL更改为站点范围。它仅在当前页面上更改，但在其他页面上不更改。

我的计算属性是：

computed: {
    changeQualityVideo: {
        get: function () {
          let _s = this
          return _s.$store.state.videoQuality
        },
        set: function (changeQualityVideo) {
          let _s = this
          _s.$store.state.videoQuality = changeQualityVideo
        }
  },
  reloadPlayer: function () {
    return this.$store.state.currentTableInfo.TableName.split('-')[1]
  }
},
watch: {
    changeQualityVideo (value) {
        let _s = this
        let sources = ''
        if (value === 2) {
            this.$store.state.urls.video_url = 'http://local.stream.com/'
            sources = {src: this.$store.state.urls.video_url + 'hls/mds' + _s.reloadPlayer + 'table1.m3u8', type: 'application/x-mpegURL'}
        } else if (value === 1) {
            this.$store.state.urls.video_url = 'http://global.stream.com/'
            sources = {src: this.$store.state.urls.video_url + 'hls/mds' + _s.reloadPlayer + 'table1.m3u8', type: 'application/x-mpegURL'}
        }
        _s.$store.state.hlsPlayer.src(sources)
        _s.$store.state.hlsPlayer.load()
        _s.$store.state.hlsPlayer.play()
  }
}

我的理论是我需要将get属性放在watch属性中。或者watch子句中的get属性。但两人都不确定。

更新： store.js是这样的：

const store = () => {
  return new Vuex.Store({
    state: {
      urls: {
    <video>_api: <api>
    video_url: 
      },
    hlsPlayer: null
}

如何在Vue JS中设置计算属性内的全局变量

0 个答案: