开发工具HbuilderX3.98
在根目录下创建store目录，并在该目录下创建index.js文件
index.js 文件
/*index.js 文件*/
// #ifndef VUE3
import Vue from 'vue'
import Vuex from 'vuex'
import audio from "@/store/modules/audio.js"
Vue.use(Vuex)
const store = new Vuex.Store({
// #endif
// #ifdef VUE3
import { createStore } from 'vuex'
import audio from "@/store/modules/audio.js"
const store = createStore({
// #endif
modules:{
audio
},
state: {
ceshi:'123'
},
mutations: {
// 同步的方法
addNum(state,index){
console.log(index);
}
}
})
export default storeaudio.js文件
/*audio.js 文件*/
export default {
namespaced: true,//命名空间必须写
state: {
audioSrc:"569823888",
// 存放全局事件
events:[]
},
mutations: {
changeAudioSrc(state,src){
console.log('src',src);
state.audioSrc = src;
},
// 注册全局事件
regEvent(state,event){
state.events.push(event);
},
// 执行全局事件
doEvent(state,params){
state.events.forEach(e => {
e(params);
})
},
//注销实践
removeEvent(state,event){
let index = state.events.findIndex(item => {
return item === event;
})
if (index !== -1) {
state.events.splice(index,1);
}
}
},
// 异步方法
actions:{
// 分发注册全局事件
$audioOn({commit},event){
commit('regEvent',event);
},
// 分发执行全局事件
$audioEmit({commit},params){
commit('doEvent',params);
},
// 分发注销全局事件
$audioRemoveEvent({commit},event){
commit('removeEvent',event);
}
}
}mian.js文件
// #ifndef VUE3
import Vue from 'vue'
import App from './App'
//vuex使用
import store from "/store"
Vue.prototype.$store = store;
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
import App from './App.vue'
//vuex使用
import store from "/store"
import Vuex from "vuex";
export function createApp() {
const app = createSSRApp(App)
app.use(store)
return {
Vuex,//注意：如果 nvue 使用 vuex 的各种map工具方法时，必须 return Vuex
app
}
}
// #endif需要使用的vue 或者nvue界面:（组件）
<script>
//引入按需导入
import { mapState, mapMutations, mapActions } from "vuex";
export default {
data() {
return {
innerAudioContext:null,
index:0
}
},
mounted() {
// 1.注册全局事件(注意：this.onAudionPlay 是methods 中的方法)
this.$audioOn(this.onAudionPlay);
},
computed:{
//计算属性
// vueX使用
...mapState({
ceshi:state => state.ceshi,
audioScr:state => state.audio.audioSrc
}),
},
// vue3 销毁
unmounted(){
//3.移除全局事件(注意：this.onAudionPlay 是methods 中的方法)
this.$audioRemoveEvent(this.onAudionPlay);
},
//vue2 销毁
destroyed() {
},
methods: {
...mapMutations('audio',['changeAudioSrc']),
...mapActions('audio',['$audioOn','$audioEmit','$audioRemoveEvent']),
//🌹注意：监听播放音频全局事件
onAudionPlay(index){
console.log(index);
},
// 音频播放-点击事件
openAudio(item){
// 2.分发全局事件
this.$audioEmit(this.index);
}
}
}
</script>
