一個(gè)開始
小程序開發(fā)者總會(huì)碰到各種頁面之間的通信問題，實(shí)現(xiàn)方式也五花八門，比如...
場(chǎng)景還原
首先這是一個(gè)電商小程序。
有這樣一個(gè)需求：
實(shí)現(xiàn)方式
方式一：onShow直接請(qǐng)求接口
Page({ onShow() { // ...一些邏輯 // 后端請(qǐng)求新的購物車數(shù)量 this.requestCartNum(); }})不足： 每次onShow都要請(qǐng)求接口，浪費(fèi)資源。
方式二：globalData存儲(chǔ)購物車數(shù)量，onShow中做刷新
// 主頁.jsPage({ onShow() { // 在globalData獲取到購物車數(shù)據(jù) let num = globalData.cartNum; if (num !== this.data.cartNum) { this.setData({ cartNum: num, }); } }});// 加購頁.jsPage({ // 加購后改變globalData的值 cartAdd(num) { globalData.cartNum = globalData.cartNum + num; }})方式三：加購后獲取首頁實(shí)例，調(diào)用首頁方法
// 首頁.jsPage({ onCartAdd(num) { this.setData({ cartNum: this.data.cartNum + num, }); },});// 加購頁.jsPage({ onCartAdd(num) { // 加購后獲取到首頁的實(shí)例，調(diào)用首頁onCartAdd方法 let pages = getCurrentPages(); let curPage = pages[0]; curPage.onCartAdd(num); }})不足：不確定能不能準(zhǔn)確拿到首頁的實(shí)例，如果換做其他頁面就很難復(fù)用
方法四：事件訂閱與發(fā)布
// 首頁.jsPage({ onLoad() { // 首頁監(jiān)聽事件 this.$bus.on('cart_add', (num) => { this.setData({ cartNum: this.data.cartNum + num, }) }) }})// 加購頁.jsPage({ // 加購成功后觸發(fā)cart_add事件 onCartAdd(num) { this.$bus.emit('cart_add', num); }})此方法用事件系統(tǒng)，訂閱發(fā)布模式去做的處理。
以上幾種方法中最優(yōu)解決方案是方法四，利用事件的訂閱與發(fā)布，邏輯清晰兼容性好。但是都不可避免的不足是：每一個(gè)需要?jiǎng)討B(tài)顯示購物數(shù)量的頁面都需要添加相同的邏輯代碼。
狀態(tài)管理方案
單頁應(yīng)用中最常用的就是組件之間的通信，由此誕生了不同的狀態(tài)存儲(chǔ)方案： react用redux， vue用vuex。他們的思路都是類似的。都有一個(gè)核心 store 存儲(chǔ)著一切要管理的狀態(tài)。
那么，其他框架可以，小程序也可以。以redux為例，實(shí)現(xiàn)一套簡(jiǎn)單的狀態(tài)管理方案。
wxdux的實(shí)現(xiàn)
使用前提：有redux基礎(chǔ)
wxdux 類似與redux，以action來描述觸發(fā)的行為，reducer來描述state的變化。
1. 小程序入口中注冊(cè)
注冊(cè)store并添加到globalData中去
import {createStore} from './wxdux/index';import reducer from './reducer';const store = createStore(reducer);App({ globalData: { store, },});2. reducer實(shí)現(xiàn)
寫法與redux類似，功能也類似。
const userReducer = (state = {}, action) => { // ...}const postReducer = (state = [], action) => { // ...};const reducers = { user: userReducer, posts: postReducer,};export default reducers;3. 頁面中使用wxdux
connect方法會(huì)將小程序頁面實(shí)例與wxdux連接起來，必須提供$useState方法，該方法接收state，返回該頁面所需要的state
import {connect} from './wxdux/index';Page(connect({ data: { sex: '男', }, onLoad() { // ... }, $useState(state) { return { name: state.name, }, },}))4. wxml中使用name
<view>{{name}}</view>5. 觸發(fā)store更新
使用dispatch方法，該方法接收一個(gè)對(duì)象作為參數(shù)，該對(duì)象必須包含type字段表示action的類型，wxdux會(huì)根據(jù)此action更新state并且刷新所有使用name的視圖
import {dispatch} from './wxdux/index';Page(connect({ // 某點(diǎn)擊事件觸發(fā)，更新姓名為“張三” onClick() { const updateName = { type: 'update_name', name: '張三' }; dispatch(updateName); }}))總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
