数据改变 音频开启与关闭

//audio

<template>
  <div style="position:absolute;z-index:1">
    <!-- {{ wsAdding }} -->
    <audio
      src="../../../public/static/click.mp3"
      id="myaudio"
      ref="fhshj"
      controls="controls"
      loop="false"
      hidden="true"
    ></audio>
      <!-- hidden="true" -->
    <!-- <input type="button" ref="fhshj" @click="autoPlay" value="播放" />
    <input type="button" @click="closePlay" value="关闭" /> -->
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } =
  createNamespacedHelpers("homedetail");
export default {
  data() {
    return{
      rootDom: null
    }
  },

  mounted(){
    // this.autoPlay()
    // this.$refs.fhshj.click()
  },

  methods: {
    autoPlay() {
      if(this.rootDom){
        this.rootDom.play();
        setTimeout(() => {
          this.closePlay();
        }, 300);
      }else{
          this.rootDom = document.getElementById("myaudio");
          console.log(this.rootDom,'this.rootDom99999999999999')
          this.rootDom.play();
          setTimeout(() => {
            this.closePlay();
          }, 300);
      }

    },
    closePlay() {
      this.rootDom = document.getElementById("myaudio");
      this.rootDom.pause();
      this.rootDom.load();
    },
  },

    computed: {
      ...mapState({
          wsAdding: (state) => state.wsAdding,
          isAudio: (state) => state.isAudio,
      })
    },
    watch:{
      wsAdding:{
        handler(newVal){
          console.log(newVal)
        //  this.$nextTick(() => {this.autoPlay()})
          this.autoPlay()
        },
        // immediate:true,
        // deep:true
      },
      isAudio:{
        handler(newVal){
          console.log(newVal,'newVal')
          this.autoPlay()
        }
      }
    }
};
</script>

<style>
</style>

 

//vuex


        isAudio:false

        set_isAudio(state,info){
            state.isAudio = !state.isAudio
        }

监听isaudio使音频播放