利用vuex实现新消息提示音

Moving bricks

已于 2022-09-02 11:17:32 修改

阅读量639

点赞数

分类专栏： vue 文章标签： vue.js javascript

于 2022-09-02 11:07:15 首次发布

本文链接：https://blog.csdn.net/qq_44832960/article/details/126658336

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML代码

为了能在vuex里面获取到audio标签所以标签要放在App.vue里面和router-view同级

在这里插入图片描述

Vuex代码

因为vuex和app.vue是同级所以这边获取dom也是可以获取到的，因为浏览器没有做交互的情况下是不能直接用js调用语音播放的，所以需要处理一下

const audio = {
  state: {
    //存储对象属性 value,text
    audioState: false,
    load:false
  },
  mutations: {
    SET_AUDIO: (state, fields) => {
        state.audioState = true;
        let music = document.getElementById("musicAudio");
        if (state.audioState) {
            if (!state.load) {
              document.addEventListener(
                "touchstart",
                function () {
                  music.play();
                },
                false
              );
            } else {
                music.play()
            }
          } else {
            audio.pause()
          }
          state.load = true
    }
  },
  actions: {
    // TODO 如果没找到可以尝试请求一下
    setAudio({ commit }, userInfo) {
        commit('SET_AUDIO')
    }

  }
}