关于前端:uniapp-监听消息推送

39次阅读

共计 1067 个字符，预计需要花费 3 分钟才能阅读完成。

1、监听音讯推送，后端记得推送的模板是： 透传音讯！透传音讯！透传音讯！
2、我的需要是依据后端推送的数据，一旦有值就从新调用接口刷新页面数据。
3、我这边是监听音讯推送即可，所以用不到监听的数据，用了 watch 监听，记得每次都要传工夫戳或者其余的形式，每次传值必须不一样，不然 watch 监听不到数据变动，感觉能解决了问题的，动动小指头点个赞~ O(∩_∩)O

A、在 App.vue 中

onLaunch: function() {
            let this_ =this
            // #ifdef  APP-PLUS
              // 监听接管透传音讯事件  
              plus.push.addEventListener('receive', function(message) { 
                // 解决透传音讯的业务逻辑代码,message.content: 监听到的数据
                this_.$store.commit('changeValue',message.content)
              }, false);
             //#endif
             console.log('APP onLaunch');
        },

B、设置 vuex，通过 vuex 传递数据，而后在调用的页面用 watch 监听数据的变动

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
let index = 0; // index 的设置是为了每次更新数值不同，我的需要只须要监听到音讯推送过去，调用接口即可。const store = new Vuex.Store({
    state: {getData:'11',},
    mutations: {
       // 对 state 中的值，进行批改，这个参数 state 是 data 中所有的值哦。changeValue(state, provider){
                let a = index++;
                   this.state.getData= provider+a
                   
               }
    }
})
export default store

C、页面调用

computed: {memberData(){return this.$store.state.getData;},
    },
 watch: {async  memberData(){await this.getUnReadData() // 这是我监听数据变动调用接口更新页面数据
                this.$refs.uToast.show({
                    title: '更新数据了',
                    // 如果不传此 type 参数，默认为 default，也能够手动写上 type: 'default'
                    type: 'success',
                    position: 'top',
                    // 如果不须要图标，请设置为 false
                    icon: true
                })
           }
    },

正文完