Minii

谁在使用

简体中文 | English
特点
体积小
: 在导入小程序后小于1KB
易使用
: 通过两个API就可以完成状态管理
安装
小程序基础库版本 2.2.1 或以上
如何使用
1. 创建store(model)来保存对应的state
import { observe } from 'minii'
class UserStore {
constructor () {
this.name = 'A'
}
changeName (name) {
this.name = name
}
}
export default observe(new UserStore(), 'user')
2. 将状态和页面联系起来
import { mapToData } from 'minii'
import userStore from '../../stores/user'
const connect = mapToData(function (state, opt) {
return {
myName: state.user.name
}
))
Page(connect({
onChangeName () {
userStore.changeName('B')
}
}))
3. 在页面中使用绑定的data
<view>
<text>My name</text>
<text>{{ myName }}</text>
<button bindtap="onChangeName">Change Name</button>
</view>
4. 需要在小程序启动时引用创建的store(此举是为了调用observe)
推荐在项目中创建一个文件统一引用所有的store,比如项目结构如下:
/stores
user.js
shop.js
index.js
app.js
然后在stores/index.js中引入所有store
export userStore from './user'
export shopStore from './shop
最后在小程序的app.js中引用这个统一的文件
require('./stores/index')
API
mapToData
mapToData会将需要的数据映射到你当前页面的data上,和react-redux中的connect是类似的概念,这里的state是全局的状态,比如你之前用observe订阅了一个store observer(instance, 'user')
,这个store里的局部变量就可以通过state.user
得到
observe
observe会将一个store里面的变量都订阅在全局状态下,并通过mapToData让一个页面订阅这些变量,当在任何地方改变store里面的变量,变量的更新都会推送到订阅这些变量的页面中从而更新界面。
推荐所有改变变量的方法都作为内部方法写在store里面,而不是在其它任意的地方随意的改变一个store的变量
Deployment
$ npm run build
$ npm publish
License
MIT