Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cicec/we-mobx
:hatching_chick: We MobX - 在微信小程序中使用 MobX
https://github.com/cicec/we-mobx
javascript miniprogram mobx reactive-programming typescript wechat-mini-program
Last synced: about 2 months ago
JSON representation
:hatching_chick: We MobX - 在微信小程序中使用 MobX
- Host: GitHub
- URL: https://github.com/cicec/we-mobx
- Owner: cicec
- License: mit
- Created: 2020-04-29T12:10:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T19:49:37.000Z (about 1 year ago)
- Last Synced: 2024-07-31T20:30:12.476Z (about 2 months ago)
- Topics: javascript, miniprogram, mobx, reactive-programming, typescript, wechat-mini-program
- Language: TypeScript
- Homepage:
- Size: 121 KB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-wechat-weapp - we-mobx - 在微信小程序中使用 MobX (工具)
README
We MobX - 在微信小程序中加入 MobX
以最简洁的调用实现微信小程序与 MobX 之间的绑定####
> MobX 是一个简单、可扩展的状态管理方案。关于 MobX 的介绍与使用请移步 [MobX](https://mobx.js.org/README.html)
## ✨ 特性
* 📐 简洁、统一的调用风格
* ⚡️ 优秀的性能
* 📎 完善的类型支持## 📦 安装
```
npm install mobx we-mobx
```或者
```
yarn add mobx we-mobx
```## 📖 API
#### `provider(stores)(options)`
为小程序传递 stores 的全局引用,options 为 `App()` 的选项参数。
```ts
import { provider } from 'we-mobx'
import stores from './store/index'const App = provider(stores)
App({
...
})
```#### `observer.page(options)(observedStores)`
#### `observer.component(options)(observedStores)`
options 为页面或组件的选项参数,observedStores 为需被监听的 stores 对象,调用后会完成页面和组件的声明。
单独使用时需要调用 observe 完成页面声明,此时需要将 store 对象的直接引用作为参数 observedStores 传入。在 inject 中使用时则不需要,observedStores 的传递与 observe 的调用会在 inject 内部进行。
```ts
import { observer } from 'we-mobx'const observe = observer.page({
...
})observe({ storeA, storeB })
```#### `inject.page(...storeName[])(createObserver)`
为页面注入需被监听的 store。调用前需要使用 provider 将 stores 全局引入。
createObserver 的参数为 stores 的直接引用,返回值为 observer 函数调用返回的 observe 函数。此时无需再次调用 observe 函数指定监听对象,inject 会自动完成需被监听的 stores 的注入。
```ts
import { inject } from 'we-mobx'inject('storeA', 'storeB')(({ storeA }) =>
observer.page({
...
})
)
```## 🏀 使用
#### 定义一个 store
```ts
import { observable, computed, action } from 'mobx'class Todo {
id = Math.random()@observable title = ''
@observable completed = falseconstructor(title: string) {
this.title = title
}
}class TodoStore {
@observable todos: Todo[] = []@action
add(title: string) {
this.todos.push(new Todo(title))
}@action
remove(id: number) {
this.todos.splice(
this.todos.findIndex(todo => todo.id === id),
1
)
}@action
toggle(id: number) {
const todo = this.todos.find(item => item.id === id)if (todo) {
todo.completed = !todo.completed
}
}
}export default new TodoStore()
```#### 传递全局 stores 并在页面中注入指定的 store
```ts
import { provider } from 'we-mobx'
import { todoStore } from './store/index'const App = provider({ todoStore })
App({
...
})
``````ts
import { inject } from 'we-mobx'inject('todoStore')(({ todoStore }) =>
observer.page({
count: 0,addTodo() {
todoStore.add('My Todo ' + ++this.count)
},removeTodo(e: any) {
const { id } = e.currentTarget.dataset
todoStore.remove(id)
},toggleCompleted(e: any) {
const { id } = e.currentTarget.dataset
todoStore.toggle(id)
},
})
)
```#### 如果只使用 observer,则需要再次调用以传入需监听的 store 对象
```ts
import { observer } from 'we-mobx'
import { todoStore } from '../../store/index'const observe = observer.page({
count: 0,addTodo() {
todoStore.add('My Todo ' + ++this.count)
},removeTodo(e: any) {
const { id } = e.currentTarget.dataset
todoStore.remove(id)
},toggleCompleted(e: any) {
const { id } = e.currentTarget.dataset
todoStore.toggle(id)
},
})observe({ todoStore })
```#### store 中的状态会被映射至 data 中,直接在 wxml 中引用
```html
{{ item.title }}
添加
```## 🌟 FAQ
### 应该使用 provider & inject 的方式,还是直接使用 observer ?
推荐 provider & inject 这样的引入方式。如果只想在特定的页面引入 store,或是偏好更灵活直观的调用方式,可以只使用 observer。
### 在 provider 或 observer 传入的 stores 结构应该是怎样的?
在 provider 中需要传入全部 stores 的引用,并且需遵循 `stores: { storeA, storeB }` 这样的格式。
在 observer 中传递的结构与 provider 中类似,但只需传递需被监听的 store。
## 📄 License
[MIT](https://github.com/clancysong/we-mobx/blob/master/LICENSE)