Awesome

Minii

谁在使用

mp qrcode gh_f977d523b1b8_258

简体中文 | English

特点

体积小: 在导入小程序后小于1KB
易使用: 通过两个API就可以完成状态管理

安装

小程序基础库版本 2.2.1 或以上

$ npm install minii --production
在开发者工具里面依次点击工具 -> 构建 npm
在开发者工具的详情里面勾选 使用 npm 模块

如何使用

1. 创建store(model)来保存对应的state

// stores/user.js

import { observe } from 'minii'

class UserStore {
  constructor () {
    this.name = 'A'
  }

  changeName (name) {
    this.name = name
  }
}

// 第二个参数'user'会将当前store的所有内部变量绑定在全局变量的user属性上
// 如果第二个参数没有写，会默认使用该class名字的全小写
export default observe(new UserStore(), 'user')

2. 将状态和页面联系起来

import { mapToData } from 'minii'
import userStore from '../../stores/user'

const connect = mapToData(function (state, opt) {
  // opt 与 onLoad(opt) 的opt一致
  // this.data 可以获取到当前页面的data
  return {
    myName: state.user.name
  }
))

// 亦可以使用在Component
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