關於mpvue組件不更新的的問題


問題描述:

1、A頁面列表頁面跳轉到B頁面提交用戶資料提交完成那回退到A頁面數據不刷新

解決思路:頁面跳轉成功之后再去回到A頁面請求新的數據傳到A頁面列表頁(子組件)

提交完成回退件頁面重新在onShow() {}的生命周期

A頁面初始化順便打一下生命周期,后面的的變量是小程序調用接口獲取登錄憑證,然后才能過去自己一下數據,這個變量有登陸成功之后數據是設置true

不清楚的可以看一下這塊登陸流程

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

「調用接口獲取登錄憑證(code)。通過憑證進而換取用戶登錄態信息,包括用戶的唯一標識(openid)及本次登錄的會話密鑰(session_key)等。用戶數據的加解密通訊需要依賴會話密鑰完成。」

 

 

回退件回到A頁面,生命周期頁面只執行了這個於是再看一下生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

mpvue和vue差不多

app 部分:

  • onLaunch,初始化
  • onShow,當小程序啟動,或從后台進入前台顯示
  • onHide,當小程序從前台進入后台

page 部分:

  • onLoad,監聽頁面加載
  • onShow,監聽頁面顯示
  • onReady,監聽頁面初次渲染完成
  • onHide,監聽頁面隱藏
  • onUnload,監聽頁面卸載
  • onPullDownRefresh,監聽用戶下拉動作
  • onReachBottom,頁面上拉觸底事件的處理函數
  • onShareAppMessage,用戶點擊右上角分享
  • onPageScroll,頁面滾動
  • onTabItemTap, 當前是 tab 頁時,點擊 tab 時觸發 (mpvue 0.0.16 支持)

http://mpvue.com/mpvue/#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

以上可以知道了當回退建請求在哪里寫了吧,onShow生命周期且變量為true,工作日常總結,所以代碼不方便發,自行腦補一下畫面吧。

2、接下來請求的新的數據但是傳不到自組件

window.location.reload()和this.$forceUpdate()   都不好使,這種暴力刷新用戶體驗也不好,所以pass,了
這種也是試了
// let pages = getCurrentPages();
// // 獲取上一級頁面,即pageA的page對象
// let prevPage = pages[pages.length - 2];
// // 獲取上一級頁面,即pageA的data
// let prevPageData = prevPage.data;

// console.log('********mount---->', this.orderGoods)
// console.log('獲取當前----的頁面棧', pages, '上一個頁面prevPage---', prevPage, '上一個頁面數據prevPageData---', prevPageData)
 后來想想還是把通過vuex,A頁面請求數據提交到state,然后自組件從state獲取渲染
完美解決
以上就是解決問題的思路,vuex頁面共享數據,但是時時刷新這一塊體驗也還是不錯的。
問題還有一種思路就是本地存儲也是一個辦法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM