一個超輕量級的微信小程序狀態(tài)管理庫
發(fā)布時間：2018-04-18 10:57 所屬欄目：小程序開發(fā)教程
一個超輕量級的微信小程序狀態(tài)管理庫
An super lightweight state management tool for Weapp.
Redux太復雜了，有沒有！ 好吧，其實我只想同步一下全局變量所綁定的視圖而已。那么試試這個輕量的狀態(tài)管理工具把。Usage
- 先下載WeappStore.js，并把它放在根目錄下的utils目錄里。
- 在app.js里，先初始化WeappStore，并把它存在app上。
var WeappStore = require('./utils/store.js')
// 創(chuàng)建store實例，并定義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)變量的頁面的onLoad函數里，將頁面變量和全局狀態(tài)變量進行連接。
var app = getApp()
Page({
data: {},
onLoad: function () {
app.$store.link(this, 'userName')
}
})
<view class="Page">
Username: {{userName}}
</view>
- 好了，現在如果需要改變全局狀態(tài)變量的時候，就可以這么寫啦：
app.$store.setState('userName', 'Alice')
所有綁定這個全局狀態(tài)變量的頁面，都會自動更新啦。
- 同時在頁面的wxml也可以直接這么寫
<view data-state=" userName: {{someVariable}} " catchtap="setState" />
因為在將頁面link的時候，就自動為頁面添加了setState方法，同時約定，data-state可以用于傳遞state的值。但是這里有一個限制，就是data-state只能是下面幾種形式：
data-state=" userName: Alice "
{
userName: 'Alice'
}
data-state=" userNumber: 15 "
{
userNumber: 15
}
date-state=" userBool: false"
{
userBool: false
}
string，number和boolean可以直接解析成對應的類型。
下面是幾種錯誤的寫法：
date-state=" {{userBool: myBoolVariable}}"
date-state=" userName: {{myNameVariable}}, userEmail: {{email}}"
目前在data-state里，僅支持一對鍵-值，如果需要設置更多的，那么可以在page里在寫一個方法，在方法里再去設置state。很簡單！有沒有！
再重復一下，只有三個api
// 創(chuàng)建store實例 var weappStore = new WeappStore(stateObject) // 將全局狀態(tài)變量綁定到頁面, 如果狀態(tài)名空缺的話，則只會把為頁面賦予setState的方法，這樣頁面相當于只能設置state。 weappStore.link(page, stateName='') // 更新全局變量 weappStore.setState(stateName, newValue)
Redux什么的，暫時先放放吧。
