README-EN.md

Minii

Who's using

简体中文 | English

Why

• Tiny Size: after importing into the app, the package's size is smaller than 1kb
• Simple Usage: only 2 API for state management binding

Installation

The base library should greater than 2.2.1

1. $ npm install minii --production

2. In WeChat Developer Tool, Tools -> build npm

3. In WeChat Developer Tool, Details -> check Use NPM module

Official doc: how to use npm in wechat

How to use

1. Create store for observing data

// stores/user.js

import { observe } from 'minii'

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

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

// the second params 'user' gonna bind this store's attributes into globalState.user
// if the second params is empty, the lowercase of the class name will be used
export default observe(new UserStore(), 'user')

2. Bind state into page

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

const connect = mapToData(function (state, opt) {
  // opt is the same one in onLoad(opt)
  // using this.data to get current page's data
  return {
    myName: state.user.name
  }
))

// Same for Component
Page(connect({
  onChangeName () {
    userStore.changeName('B')
  }
}))

3. Use the bound state in the page

<view>
  <text>My name</text>
  <text>{{ myName }}</text>
  <button bindtap="onChangeName">Change Name</button>
</view>

4. We need require store when launching the app (this is only for observe)

Creating a file to import all stores is recommended, e.g.：

/stores
  user.js
  shop.js
  index.js
app.js

import all stores in stores/index.js

export userStore from './user'
export shopStore from './shop

require this file in mini-app's app.js

require('./stores/index')

API

mapToData

mapToDate is for connecting state into page's data, you can think about it like connect in react-redux. After observing a store observer(instance, 'user'), we can get the store's state by state.user

observe

observe is for binding the store's attribute into the global state and observe the changes. While changing the store's observed attributes will lead pages' update.

Only changing store's attribute through store's instance methods is recommened

Deployment

1. $ npm run build
2. $ npm publish

License

MIT