stge

状态管理器

示例

  import {state,update,subscribe} from 'stge'
  
  class NewsStore{
    @state loading = 1;
    @state list = [];
    
    @update setLoading(status){
        this.loading = status;
    }
    @update _setList(data){
        this.list = data;
    }
    
    async getData(){
        this.setLoading(true);
        
        try{
            const data = await getRequest('/api/news/...');
            this._setList(data);
        }
        finally {
          this.setLoading(false);
        }
    }
  }
  
  const newsStore = new NewsStore();

  subscribe(newsStore,function(store) {
    const list = store.list;
      
    return function() {
      if(list !== store.list){
          console.log('旧的数据',list);
          console.log('新的数据',store.list);
      }
    }
  });
  
  newsStore.getData();

在react中使用

• 未完成

import {observe} from 'stge-react';

@observe
class NewsListComponent extends React.Component{
    newsStore = new NewsStore();
    componentDidMount(){
        this.newsStore.getData();
    }
    render(){
        if(this.newsStore.loading){
            return <div>loading</div>
        }
        return <ul>
            {this.newsStore.list.map(function(item,index) {
              return <li key={index}>{item.title}</li>
            })}
        </ul>
    }
}