1.發現問題:
在uni-app中小程序使用vuex,state的值改變了,但視圖並沒有更新
如圖所示:
2.找到問題: (大膽想象)
vuex的state數據更新了,但頁面的視圖並沒有實時更新.然後我聯想到在原生小程序中,我們改變了data的值,頁面也不會實時的更新,還需要通過this.setData(邏輯層數據發送到視圖層)方法,在uni-app中,我們改變data的值,它應該一起封裝了this.setData().但在vuex中,可能沒有
3.解決問題:
(1) 我們可以強制更新視圖
我前面跳轉路由用的是uni.navigateTo(保留當前頁面，跳轉到應用內的某個頁面),當使用uni.redirectTo(關閉當前頁面，跳轉到應用內的某個頁面),是可以解決問題的.
如圖所示:
效果:
(2) 我們可以先取到需要的vuex中的state裏的值,再賦值給data中,
如果是跨頁面的話,我們可以通過頁面生命週期onShow,對data中的值再獲取一次vuex中的state對應值
如圖所示:
效果:
4.與真實vue的對比
於是我關聯想到,vue做pc端的時候有個keep-alive屬性,用來對組件進行緩存,那麼會不會出現以上的問題呢?我試了試,發現不會.
總結:
uni-app畢竟是個跨平臺框架,不僅要做到多端兼容,還要在編譯時轉化成這個環境的語法.有些東西不完全一樣,是很正常的,當我們遇到上面的問題後,可能就會吐槽這個框架坑多啊,什麼的.但我覺得程序員就是要發現問題,找到問題,解決問題.經過我們的努力,我相信國內的框架會越來越好!