brain-store

use

import {Store,resource,IResource} from 'banggood-store';
const user:IResource = resource('PMS/User');
export default class StoreBase extends Store {
    static meta = {
        ...Store.meta,
        namespace: 'bang.portal'
    }
    context:any
    constructor(context){
        super(context)
    }
}

class Counter extends StoreBase {
  completed:string;
  name: string;
  get fullName() {
    return `${this.name} new`;
  }
  setCompleted(value) {
    this.completed = value;
  }
  setName(value) {
    this.name = value;
  }
}

class ContainerStore extends StoreBase{
    static meta={
        ...StoreBase.meta,
        eventScopes:[user],
        contextTypes:{
            CounterApp:Counter,
        }
    }
    _title='';
    get name():string{
        return this._title
    };
    constructor(context){
        super(context);
    }
    contextCounterStore():Counter{
        return this.context.CounterApp
    }
    triggerEvent(payload) { //事件广播，批量修改store里面数据状态 在相应store里面定义onEvent 函数并且eventScopes值设为user
        this.context.dispatch(user.created,payload);
    }
    setName(value) {
        this._title = value;
    }
}

class UserListStore extends StoreBase {
    static meta = {
        ...StoreBase.meta,
        eventScopes: [user],
    };

    getContextAppStore() {
       // return this.context.app;
    }
    payloadModel = null;
    onEvent(event) {
        if(typeof event.payload==='object'){
            Object.keys(event.payload).forEach(key =>{
                this[`${key}`] = event.payload[key];
            });
        }
        else {
            this.payloadModel = event.payload;
        }
    }
}
--- angular -----

import { Component,OnInit,OnChanges,SimpleChange,EventEmitter,Output } from '@angular/core';
import ContainerStore from './store/ContainerStore';
import {bind} from 'banggood-store'

@bind({store:ContainerStore})
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  store:ContainerStore
  constructor(){
    console.log(this)
  }
	onVoted(agreed: boolean) {
     this.store.setName('设置mobx');
  }
}

observablePromise

我们所有服务端数据结构都用此类构造出来

MapperEntity&JsonProperty

介绍(Introduction)

背景：对于单页应用，数据源是从API服务器获得的。 我们不用直接使用api数据。这时就需要适配器层赖根据需要转换数据。 此外，该适配器与API服务器的数据依赖关系相反（API Server被视为不可控制的非常不可靠，因为数据结构可能由后端 编码器为某些特定目的编辑）到我们的适配器这变得可靠。 因此，该库被创建为适配器。

USING

npm install json-mapper-object --save
or
yarn add json-mapper-object

Example

import {MapperEntity,JsonProperty} from 'json-mapper-object';

class Student {
    @JsonProperty('name')
    fullName=void 0;

    constructor() {
    }
}

class Address {
    @JsonProperty('first-line')
    firstLine=void 0;
    @JsonProperty('second-line')
    secondLine=void 0;
    @JsonProperty({clazz: Student})
    student=void 0;
    city=void 0;

    constructor() {
    }
}

class Person {
    @JsonProperty('Name')
    name=void 0;

    age=void 0;

    @JsonProperty('xing')
    surname=void 0;

    age=void 0;

    @JsonProperty({clazz: Address, name: 'AddressArr'})
    addressArr=void 0;

    @JsonProperty({clazz: Address, name: 'Address'})
    address=void 0;

    constructor() {
    }
}

现在这里是API服务器返回的数据，假设它已经被解析为JSON对象。

let json = {
  "Name": "Mark",
  "xing": "Galea",
  "age": 30,
  "AddressArr": [
      {
          "first-line": "Some where",
          "second-line": "Over Here",
          "city": "In This City",
          "student": {
              name1: "Ailun"
          }
      },
      {
          "first-line": "Some where",
          "second-line": "Over Here",
          "city": "In This City",
          "student": {
              name1: "Ailun"
          }
      }
  ],
  "Address": {
      "first-line": "Some where",
      "second-line": "Over Here",
      "city": "In This City",
      "student": {
          name: "Ailun"
      }
  }

只需使用以下代码即可映射。 该映射基于@JsonProperty装饰器元数据。

const person = MapperEntity(Person, json);