微信小程序全局狀態(tài)管理，并提供Vuex的開(kāi)發(fā)體驗(yàn)
1. 概要微信小程序的開(kāi)發(fā)體驗(yàn)類似vue和react，但是卻沒(méi)有提供全局狀態(tài)管理的機(jī)制，所以狀態(tài)的共享只能通過(guò)屬性傳遞的方式來(lái)實(shí)現(xiàn)。這種做法在小規(guī)模的應(yīng)用中尚可以滿足開(kāi)發(fā)效率，但是在復(fù)雜的應(yīng)用中組件的嵌套層次很深，屬性傳遞的路徑過(guò)長(zhǎng)。 于是我就想利用小程序Page中的data對(duì)象來(lái)構(gòu)建一個(gè)全局store，這個(gè)store滿足一下幾點(diǎn)需求：
先附上源碼 github地址 2. 使用我們先跳過(guò)原理來(lái)看使用方法。 2.1 安裝將Store.js放入微信小程序項(xiàng)目的文件夾中，例如/lib/Store.js。 2.2 創(chuàng)建Page對(duì)象這里我們通過(guò)wxappStore.createPage來(lái)創(chuàng)建。對(duì)比一下Store.js和原來(lái)的創(chuàng)建方法的區(qū)別
// 原來(lái)的創(chuàng)建方法
Page({
data: {
message: ''
},
onLoad: function () {
this.setData({
message: 'hello world'
})
}
})
// 增加全局狀態(tài)管理之后
import wxappStore from "../../lib/Store.js";
Page(wxappStore.createPage({
// 第一個(gè)參數(shù)和原來(lái)傳入Page方法的option沒(méi)有區(qū)別。其中的data會(huì)作為全局共享對(duì)象來(lái)使用。
data: {
message: ''
},
onLoad: function () {
// 通過(guò)dispatch方法，進(jìn)行一個(gè)異步操作。
this.store.dispatch({
name: 'testAction',
payload: 'hello world'
});
// 通過(guò)commit方法，修改全局狀態(tài)。
this.store.commit({
name: 'testMutation',
payload: 'hello world'
});
}
},
// 第二個(gè)參數(shù)是一個(gè)對(duì)象，其中包含mutations和actions
{
mutations: {
testMutation: function({ setData, payload, data }) {
setData({
message: payload
});
}
},
actions: {
testAction: function ({ commit, payload, data }) {
setTimeout(() => {
commit({
name: 'testMutation',
payload: payload
});
});
}
}
}))
wxappStore.createPage方法有兩個(gè)參數(shù)。 第一個(gè)參數(shù)和原來(lái)傳入Page方法的option沒(méi)有區(qū)別。其中的data會(huì)作為全局共享對(duì)象來(lái)使用。 第二個(gè)參數(shù)是一個(gè)對(duì)象，其中包含mutations和actions 2.3 使用mutationmutation和Vuex中的mutation類似，它通過(guò)同步的方式修改狀態(tài)?？梢酝ㄟ^(guò)commit調(diào)用。 2.3.1 定義mutationmutations在wxappStore.createPage的第二個(gè)參數(shù)中定義，它用于修改全局狀態(tài)。mutation通常同步的。mutation方法的參數(shù)是一個(gè)對(duì)象，包含三個(gè)屬性：
mutations: {
testMutation: function({ setData, payload, data }) {
setData({
message: payload
});
}
},
2.3.2 調(diào)用mutation通過(guò)commit方法調(diào)用mutation，它的參數(shù)是一個(gè)對(duì)象，包含兩個(gè)屬性：
this.store.commit({
name: 'testMutation',
payload: 'hello world'
});
2.4 使用actionaction和Vuex中action概念類似，通常包含異步操作，在異步操作完成后進(jìn)行commit操作。 2.4.1 定義actionaction方法的參數(shù)是一個(gè)參數(shù)，包含3個(gè)屬性：
actions: {
testAction: function ({ commit, payload, data }) {
setTimeout(() => {
commit({
name: 'testMutation',
payload: payload
});
});
}
}
2.4.2 調(diào)用action通過(guò)dispatch方法調(diào)用action，它的參數(shù)是一個(gè)對(duì)象，包含兩個(gè)屬性：
this.store.dispatch({
name: 'testAction',
payload: 'hello world'
});
2.5 創(chuàng)建Component在Component中我們需要完成兩項(xiàng)工作 第一將全局狀態(tài)綁定到當(dāng)前組件的data屬性上，并將組件的data屬性綁定到頁(yè)面元素上。 第二組件需要使用commit或者dispatch完成全局狀態(tài)的修改。 這里Store.j通過(guò)wxappStore.createComp來(lái)創(chuàng)建Component，它會(huì)通過(guò)代理的方式為Component實(shí)現(xiàn)全局狀態(tài)管理的功能。
import wxappStore from "../lib/Store.js";
Component(wxappStore.createComp({
data: {
localtimeData: ''
},
ready: function () {
// 綁定全局狀態(tài)
this.getGlobalData({ globalDataKey: 'localtime', localDataKey: 'localtimeData' });
// 改變?nèi)譅顟B(tài)
this.store.commit({
name: 'testMutation',
payload: (new Date()).toLocaleTimeString()
})
}
}))
<view>讀取全局狀態(tài)：{{localtimeData}}</view>
2.5.1 全局狀態(tài)綁定全局狀態(tài)綁定通過(guò)getGlobalData這個(gè)實(shí)例方法實(shí)現(xiàn)，這個(gè)方法并不在小程序的運(yùn)行環(huán)境中，它是Store.js執(zhí)行的過(guò)程中插入到Component實(shí)例中的。
getGlobalData的參數(shù)是一個(gè)對(duì)象，包含兩個(gè)屬性：
// 綁定全局狀態(tài)
this.getGlobalData({ globalDataKey: 'localtime', localDataKey: 'localtimeData' });
2.5.2 改變?nèi)譅顟B(tài)可以使用store.commit或者store.dispatch，store并不是小程序的運(yùn)行環(huán)境中內(nèi)置的，同樣是通過(guò)Store.js插入到每一個(gè)component實(shí)例中。它的使用方法和Page中的類似。 3. 這套框架的不足
|
