标签：play 调用 refs mutations updataPlayPause paused state audio vuex

做项目时候需要设定一个状态值为全局可以使用。所以使用vuex 在index.js当中state内设定属性。

state: {
    // 切换播放按钮
    playPause: true
  },
  mutations: {
    updataPlayPause: function (state) {
      state.playPause = !state.playPause
    }
  }

　　而如果在组件当中不可以直接对 state内属性直接进行修改。需要在mutations内定义方法对其进行修改。

　　根据视频教程书写 调用updataplaypause方法则会报错

import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      isShow: true
    }
  },
  computed: {
    ...mapState(['playList', 'playListIndex', 'playPause']),
    ...mapMutations(['updataPlayPause'])
  },
  mounted () {

  },
  methods: {
    // 播放音乐
    play: function () {
      // this.$refs.audio.paused 暂停状态 如果暂停 就点击播放
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.updataPlayPause()
      } else {
        this.$refs.audio.pause()
        this.updataPlayPause()
      }
    }
  }

}

  updataplaypause 不是一个函数，分析是因为this.updataplaypause() 被当做在组件内的一个方法，而又没有定义，所以报错。

　　修改调用方式。

methods: {
    // 播放音乐
    play: function () {
      // this.$refs.audio.paused 暂停状态 如果暂停 就点击播放
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.$store.commit('updataPlayPause')
      } else {
        this.$refs.audio.pause()
        this.$store.commit('updataPlayPause')
      }
    }
  }

　　参考文章：https://www.yisu.com/zixun/692010.html

标签：play,调用,refs,mutations,updataPlayPause,paused,state,audio,vuex
来源： https://www.cnblogs.com/WangEDblog/p/16412394.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。