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