Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Minii

Version js-standard-style npm download Build Status

谁在使用

mp qrcode gh_f977d523b1b8_258

简体中文 | English

特点

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

安装

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

  1. $ npm install minii --production

  2. 在开发者工具里面依次点击 工具 -> 构建 npm

  3. 在开发者工具的详情里面勾选 使用 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

  1. $ npm run build
  2. $ npm publish

License

MIT

About

State management for Wechat Mini App 小程序状态管理

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •