import {Model} from 'mdel';

class UserModel extends Model{
  constructor(){
    super({
      uid:0
    });
  }
  login(){
    this.setData({
      uid:1
    })
  }
}

const userStore = new UserModel();
const unSubscribe = userStore.subscribe(function(){
  if(userStore.data.uid > 0 && userStore.prevData.uid === 0){
    console.log('您已登录');
  }
});
userStore.login();
unSubscribe();

var Model = mdel.Model;
var userStore = createUserStore();

const unSubscribe = userStore.subscribe(function(){
  if(userStore.data.uid > 0 && userStore.prevData.uid === 0){
    console.log('您已登录');
  }
});

userStore.login();
unSubscribe();

function createUserStore() {
  var store = new Model({
    uid:0
  });

  store.login = function(){
    store.setData({
      uid:1
    });
  };

  return store;
}

//models/list.js
import {Model} from 'mdel';

export default class ListModel extends Model{
  constructor(){
    super({
      loading:false,
      list:[]
    })
  }
  setLoading(status){
    this.setData({
      loading:status
    })
  }
  setItems(data){
    this.setData({
      loading:false,
      list:data
    })
  }
}

//login-log.jsx
import React from 'react'
import {observe} from 'mdel-react'
import ListModel from '../models/list'

@observe
class UserLoginLog extends React.Component{
  sUser = userStore;
  sList = new ListModel();

  async componentDidMount(){
    this.sList.setLoading(true);

    try{
      const data = await fetch('/api/user....');

      this.sList.setItems(data)
    }
    catch (e) {
      this.sList.setLoading(false)
    }
  }

  render(){
    if(this.sUser.data.uid < 1){
      return <div>你还没有登录</div>
    }

    if(this.sList.data.loading){
      return <div>loading</div>
    }
    return this.sList.data.list.map(function(item,index) {
      return <div key={index}>{item.content}</div>
    })
  }
}

export default UserLoginLog;

import React from 'react'
import {observe} from 'mdel-react'

const LoginLogList = observe(function({sUser,sList}) {
  if(sUser.data.uid < 1){
    return <div>你还没有登录</div>
  }

  if(sList.data.loading){
    return <div>loading</div>
  }
  return sList.data.list.map(function(item,index) {
    return <div key={index}>{item.content}</div>
  })
});

class UserLoginLog extends React.Component{
  sUser = userStore;
  sList = new ListModel();

  render(){
    return <LoginLogList sUser={this.sUser} sList={this.sList}/>
  }
}

export default UserLoginLog;