uniapp 页面间的传值

uniapp 页面间的传值

一、数据存储在本地缓存

index页面

uni.setStorage({
                key:'swiper_info',
                data:this.info,
                success:()=>{
                    console.log('存入成功')
                }
            })

test页面

uni.getStorage({
                key:'swiper_info',
                success:(res)=>{
                    this.info = res.data
                    console.log(this.info)
                }
            })

 

二、使用uni.$emit()和uni.$on() 进行页面间通讯

uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的进行页面的通讯 ，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。

uni.$on监听

uni.$on('update',(data)=>{
console.log('监听到时间来自update,携带参数msg为:' + data.msg)
})

 

uni.$emit 触发

uni.$emit('update',{msg:'页面更新'})

 

因为事件监听是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件监听，避免重复监听。

onUnload() {  
    // 移除监听事件  
        uni.$off('login');  
    },

 

一次性的事件，直接使用 uni.$once 监听，不需要移除。

 

三、通过vuex

 

computed: {
...mapState(['login', 'city'])
},
methods: {
...mapMutations(['ShowGood'])
}

 

store文件

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        city:'城市名',
        login:false
    },
    mutations: {
        ShowGood(){
            console.log('that is good!!!')
        }
    },
    actions: {}
})

export default store