一個(gè)超輕量級(jí)的微信小程序狀態(tài)管理庫(kù)
發(fā)布時(shí)間：2018-04-18 10:57 所屬欄目：小程序開發(fā)教程
一個(gè)超輕量級(jí)的微信小程序狀態(tài)管理庫(kù)
An super lightweight state management tool for Weapp.
Redux太復(fù)雜了，有沒有！ 好吧，其實(shí)我只想同步一下全局變量所綁定的視圖而已。那么試試這個(gè)輕量的狀態(tài)管理工具把。Usage
- 先下載WeappStore.js，并把它放在根目錄下的utils目錄里。
- 在app.js里，先初始化WeappStore，并把它存在app上。
var WeappStore = require('./utils/store.js')
// 創(chuàng)建store實(shí)例，并定義state，也就是希望在全局使用的狀態(tài)變量。
var store = new WeappStore({
userName: 'Rebecca',
userEmail: undefined
})
// 可以開啟debug模式
store.debug = true
// 把store存在app上
App({
onLaunch: function () {},
onError: function () {},
$store: store
})
- 在需要使用全局狀態(tài)變量的頁(yè)面的onLoad函數(shù)里，將頁(yè)面變量和全局狀態(tài)變量進(jìn)行連接。
var app = getApp()
Page({
data: {},
onLoad: function () {
app.$store.link(this, 'userName')
}
})
<view class="Page">
Username: {{userName}}
</view>
- 好了，現(xiàn)在如果需要改變?nèi)譅顟B(tài)變量的時(shí)候，就可以這么寫啦：
app.$store.setState('userName', 'Alice')
所有綁定這個(gè)全局狀態(tài)變量的頁(yè)面，都會(huì)自動(dòng)更新啦。
- 同時(shí)在頁(yè)面的wxml也可以直接這么寫
<view data-state=" userName: {{someVariable}} " catchtap="setState" />
因?yàn)樵趯㈨?yè)面link的時(shí)候，就自動(dòng)為頁(yè)面添加了setState方法，同時(shí)約定，data-state可以用于傳遞state的值。但是這里有一個(gè)限制，就是data-state只能是下面幾種形式：
data-state=" userName: Alice "
{
userName: 'Alice'
}
data-state=" userNumber: 15 "
{
userNumber: 15
}
date-state=" userBool: false"
{
userBool: false
}
string，number和boolean可以直接解析成對(duì)應(yīng)的類型。
下面是幾種錯(cuò)誤的寫法：
date-state=" {{userBool: myBoolVariable}}"
date-state=" userName: {{myNameVariable}}, userEmail: {{email}}"
目前在data-state里，僅支持一對(duì)鍵-值，如果需要設(shè)置更多的，那么可以在page里在寫一個(gè)方法，在方法里再去設(shè)置state。很簡(jiǎn)單！有沒有！
再重復(fù)一下，只有三個(gè)api
// 創(chuàng)建store實(shí)例 var weappStore = new WeappStore(stateObject) // 將全局狀態(tài)變量綁定到頁(yè)面, 如果狀態(tài)名空缺的話，則只會(huì)把為頁(yè)面賦予setState的方法，這樣頁(yè)面相當(dāng)于只能設(shè)置state。 weappStore.link(page, stateName='') // 更新全局變量 weappStore.setState(stateName, newValue)
Redux什么的，暫時(shí)先放放吧。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉(cāng)庫(kù):
本文地址：http://www.szcjxy.com/wxmini/doc/course/23681.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
