Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wwayne/minii
State management for Wechat Mini App 小程序状态管理
https://github.com/wwayne/minii
Last synced: about 1 month ago
JSON representation
State management for Wechat Mini App 小程序状态管理
- Host: GitHub
- URL: https://github.com/wwayne/minii
- Owner: wwayne
- License: mit
- Created: 2018-10-28T08:54:22.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T18:05:04.000Z (over 1 year ago)
- Last Synced: 2024-11-01T13:34:49.086Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 937 KB
- Stars: 65
- Watchers: 3
- Forks: 12
- Open Issues: 7
-
Metadata Files:
- Readme: README-EN.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - minii
README
# Minii
[](https://www.npmjs.org/package/minii)
[](https://github.com/feross/standard)
[![npm download][download-image]][download-url]
[](https://travis-ci.org/wwayne/minii)
[download-image]: https://img.shields.io/npm/dm/minii.svg?style=flat-square
[download-url]: https://npmjs.org/package/minii
## Who's using
[简体中文](./README.md) | 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](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?t=18082018)
## How to use
#### 1. Create store for observing data
```JS
// 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
```JS
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
```html
My name
{{ myName }}
Change Name
```
#### 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.：
```js
/stores
user.js
shop.js
index.js
app.js
```
import all stores in stores/index.js
```js
export userStore from './user'
export shopStore from './shop
```
require this file in mini-app's app.js
```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