轻量的数据管理器
- 小而简,专注于数据管理
- 高效,没有拐弯抹角的东西
- 完美支持typescript
详细的文档请点击 这里
- 安装依赖
npm install rbox --save
npm install rbox-react --save
- 定义数据
import {createStore} from 'rbox'
const mArticles = ()=>{
return createStore({
loading:false,
list:[],
actions:{
setLoading(status){
this.core.updateData({
loading:status
})
},
async getPageData(){
this.actions.setLoading(true)
try{
const data = await fetch('/api/articles');
this.core.updateData({
list:data
})
}
finally {
this.actions.setLoading(false)
}
}
}
})
}
- 在react中使用
import React,{useEffect} from 'react'
import {useStores} from 'rbox-react'
const ArticlesComponent = ()=>{
const [sArticles] = useStores([mArticles()])
useEffect(()=>{
sArticles.actions.getPageData();
},[])
if(sArticles.loading){
return <div>loading...</div>
}
return sArticles.list.map(item=>{
return <div>
<h3>{item.title}</h3>
<div>{item.content}</div>
</div>
})
}