dragonbinder 다운로드 dragonbinder 소스 코드 다운로드

드래곤 바인더

Vuex에서 영감을 얻은 1KB Progressive State Management Library.

특징

드래곤 바인더
- 특징
- 목차
- 설치하다
- 사용
  - 상태
  - getters
  - 돌연변이
  - 행위
  - 이벤트
    - 이벤트 유형
  - 중첩 모듈
    - 지역 및 근본 상태
  - 플러그인 시스템
    - 플러그인 사용
    - 플러그인 개발
- API
- 기여
- 개발, 구축 및 테스트
- 합법적인

설치하다

NPM 레지스트리를 통해이 라이브러리를 Node.js 모듈로 가져올 수 있습니다.

// With npm
$ npm install dragonbinder
// With yarn
$ yarn add dragonbinder

또는 <script src="https://cdn.jsdelivr.net/npm/dragonbinder"></script> 와 함께 브라우저에서 독립형을 사용할 수 있습니다.

사용

 const Dragonbinder = require ( 'dragonbinder' ) ;

const store = new Dragonbinder ( {
  state : {
    count : 0
  } ,
  mutations : {
    increment ( state ) {
      state . count ++
    }
  }
} ) ;

store . commit ( 'increment' ) ;
console . log ( store . state . count ) // -> 1

상태

Dragonbinder는 프록시를 사용하여 상태를 "단일 진실의 출처"로 만들어 돌연변이를 저 지르지 않으면 변경할 수 없습니다. 이것은 속성을 직접 삭제, 수정 또는 추가 할 수 없음을 의미합니다. 이를 통해 우리는 주정부에 대한 모든 변경 사항을 추적 할 수 있습니다.

state PROTECT DRAGONBINDER 가 초기 상태를 제공하지 않으면 하나를 생성합니다.

 const store = new Dragonbinder ( {
  state : {
    count : 0
  } ,
  mutations : {
    addProperty ( state , value ) {
      state . hello = 'world' ;
    } ,
    modifyProperty ( state ) {
      state . count ++
    } ,
    removeProperty ( state ) {
      delete state . count ;
    }
  }
} ) ;

// This will throw errors
store . state . hello = 'world' ;
store . state . count ++ ;
delete state . count ;

// This will work as expected
store . commit ( 'addProperty' ) ;
store . commit ( 'modifyProperty' ) ;
store . commit ( 'removeProperty' ) ;

또한 초기 저장소 정의를 재사용하기 위해 싱글 톤을 피하려면 해당 상태를 공장 기능으로 선언 할 수 있습니다.

 const myStoreDefinition = {
  state ( ) {
    return {
      count : 1
    }
  } ,
  mutations : {
    increment ( state , payload ) {
      state . count = state . count + payload ;
    }
  }
} ;

const store1 = new Dragonbinder ( myStoreDefinition ) ;
const store2 = new Dragonbinder ( myStoreDefinition ) ;

store1 . commit ( 'increment' , 5 ) ;
store2 . commit ( 'increment' , 3 ) ;

console . log ( store1 . state . count ) ; // -> 6
console . log ( store2 . state . count ) ; // -> 4

getters

Vue와 마찬가지로 Dragonbinder를 사용하여 주를 기반으로 계산 된 속성을 만들기 위해 getters를 만들 수 있습니다. 이 Getters는 주를 첫 번째 논쟁으로, 다른 모든 Getters는 두 번째로 받게됩니다.

 const store = new Dragonbinder ( {
  state : {
    todos : [
      {
        content : 'First' ,
        completed : false
      } , 
      {
        content : 'Second' ,
        completed : true
      }
    ]
  } ,
  getters : {
    completed ( state ) {
      return state . todos . filter ( item => item . completed ) ;
    } ,
    completedCount ( state , getters ) {
      return getters . completed . length ;
    }
  }
} ) ;

console . log ( store . getters . completed ) ; // -> { content: 'Second', completed: true }
console . log ( store . getters . completedCount ) ; // -> 1

돌연변이

돌연변이는 상태를 변화시키는 유일한 방법이며 돌연변이를 설계 할 때 다음 점을 고려해야합니다.

Vuex 패턴에 따라 돌연변이는 동기식이어야합니다.
다른 많은 라이브러리와 달리 여러 가지 주장을 돌연변이에 전달할 수 있습니다.
Dragonbinder를 사용하면 직접 변경을 방지하기 위해 Object.freeze 사용하여 상태가 깊게 얼어 붙습니다. 따라서 돌연변이를 사용하여 상태를 변경할 때는 첫 번째 레벨 속성 만 추가, 수정 또는 삭제할 수 있으며, 제 2 레벨 특성 만 읽습니다.

 const store = new Dragonbinder ( {
  state : {
    hello : {
      name : 'John Doe'
    }
  } ,
  mutations : {
    changeNameError ( state , payload ) {
      state . hello . name = payload ;
    } ,
    changeNameOk ( state , payload ) {
      state . hello = { ... state . hello , name : payload } ;
    } ,
    changeNameTo ( state , ... args ) {
      state . hello = { ... state . hello , name : args . join ( ' ' ) } ;
    }
  }
} ) ;

// This will throw an assign to read only property error
store . commit ( 'changeNameError' , 'Jane Doe' ) ;

// This will work as expected
store . commit ( 'changeNameOk' , 'Jane Doe' ) ;

// You can pass any number of arguments as payload
store . commit ( 'changeNameTo' , 'Jane' , 'Doe' ) ;

행위

비동기 기능을 처리 해야하는 경우 동작을 사용해야합니다. 그리고 행동은 항상 전화를 한 결과 약속을 되돌릴 것입니다.

 const store = new Dragonbinder ( {
  state : {
    count : 0
  } ,
  mutations : {
    increment ( state ) {
      state . count ++
    }
  } ,
  actions : {
    increment ( state ) {
      return new Promise ( ( resolve ) => {
        setTimeout ( ( ) => {
          store . commit ( 'increment' ) ;
          resolve ( ) ;
        } , 1000 ) ;
      } )
    }
  }
} ) ;

store . dispatch ( 'increment' ) . then ( ( ) => console . log ( store . state . count ) ) ; // -> 1 after one second

이벤트

이벤트에 콜백을 등록/등록 할 수 있습니다.

 const store = new Dragonbinder ( {
  state : {
    count : 0
  } ,
  mutations : {
    increment ( state ) {
      state . count ++
    }
  }
} ) ;

// Add a named listener
let namedListener = ( store , prop , newVal , oldVal ) => console . log ( `The property ${ prop } was changed from ${ oldVal } to ${ newVal } ` ) ;
store . on ( 'set' , namedListener ) ;

// Add an anonymous listener
let removeAnonymousListener = store . on ( 'set' , ( ) => console . log ( 'Anonymous listener triggered' ) ) ;

// Committing increment will trigger the listener
store . commit ( 'increment' ) ;
// $ The property count was changed from 0 to 1
// $ Anonymous listener triggered

// Remove a named listener 
store . off ( 'set' , namedListener ) ;

// Remove an anonyous listener 
removeAnonymousListener ( ) ;

// Committing increment will do nothing as the listeners are already removed
store . commit ( 'increment' ) ;

이벤트 유형

모든 이벤트는 상점 인스턴스를 첫 번째 인수로받습니다.

이벤트 이름	언제라고 불립니다	장소별로받은 주장
AddListener	이벤트 리스너가 추가됩니다	이벤트 이름 \| 청취자가 추가되었습니다
removelistener	이벤트 리스너가 제거됩니다	이벤트 이름 \| 리스너가 제거되었습니다
세트	상태의 속성이 추가 또는 수정되며 모듈이 등록 될 때 트리거됩니다.	속성 이름 \| 새로운 가치 \| 오래된 가치
삭제	상태의 속성이 삭제되고 모듈이 등록되지 않으면 트리거됩니다.	속성 이름 \| 오래된 가치
eforecommit	커밋 방법이 호출되고 돌연변이를 적용하기 전에	돌연변이 이름 \| (...) 주장은 돌연변이로 전달되었다
저지르다	커밋 방법이 호출되고 돌연변이를 적용한 후	돌연변이 이름 \| (...) 주장은 돌연변이로 전달되었다
Beforedispatch	호출 된 파견 방법 및 작업을 적용하기 전에	행동 이름 \| (...) 주장은 행동에 전달되었다
보내다	파견 방법이 호출되고 조치를 적용한 후	행동 이름 \| (...) 주장은 행동에 전달되었다
얻는 사람	getter가 호출됩니다	getter 이름 \| 게터의 가치
플러그인	플러그인이 추가되었습니다	플러그인 추가 \| (...) 옵션이 플러그인으로 전달되었습니다
registerModule	모듈이 등록되었습니다	네임 스페이스 등록 \| 모듈 정의 \| 정의로 만든 상점
미확인 모듈	모듈이 등록되지 않았습니다	네임 스페이스 미등록 \| 정의로 만든 상점

중첩 모듈

Vuex와 마찬가지로 DragonBinder는 매장을 모듈로 나눌 수 있으며 각 모듈은 더 많은 중첩 모듈을 포함하여 자체 저장소 정의를 포함 할 수 있습니다.

 const moduleA = {
  state : { ... } ,
  mutations : { ... } ,
  actions : { ... } ,
  getters : { ... }
}

const moduleB = {
  state : { ... } ,
  mutations : { ... } ,
  actions : { ... } ,
  getters : { ... }
  modules : {
    a : moduleA
  }
}

const store = new Dragonbinder ( {
  modules : {
    b : moduleB
  }
} ) ;

console . log ( store . state . b ) // -> `moduleB`'s state
console . log ( store . state [ 'b.a' ] ) // -> `moduleA`'s state

또한 매장이 만들어지면 registerModule 및 unregisterModule 메소드로 모듈을 등록/등록 할 수 있습니다.

모듈을 등록 할 때는 초기 중첩 모듈 만 등록되지 않도록하십시오.

 const moduleA = {
  state : { ... } ,
  mutations : { ... } ,
  actions : { ... } ,
  getters : { ... }
}

const moduleB = {
  state : { ... } ,
  mutations : { ... } ,
  actions : { ... } ,
  getters : { ... } ,
  modules : {
    a : moduleA
  }
}

const moduleC = {
  state : { ... } ,
  mutations : { ... } ,
  actions : { ... } ,
  getters : { ... }
}

const store = new Dragonbinder ( ) ;
store . registerModule ( 'b' , moduleB ) ;
store . registerModule ( 'b.c' , moduleC ) ;

console . log ( store . state . b ) // -> `moduleB`'s state
console . log ( store . state [ 'b.a' ] ) // -> `moduleA`'s state
console . log ( store . state [ 'b.c' ] ) // -> `moduleC`'s state

store . unregisterModule ( 'b' ) ; 

console . log ( store . state . b ) // -> undefined
console . log ( store . state [ 'b.a' ] ) // -> undefined
console . log ( store . state [ 'b.c' ] ) // -> `moduleC`'s state

지역 및 근본 상태

각 모듈은 다른 매장과 마찬가지로 작동하지만 Vuex와 달리 모든 Dragonbinder 모듈에는 디자인이 표시됩니다. 모듈로 뿌리 돌연변이, 동작 또는 게터를 추가 할 수있는 옵션이 없습니다. 따라서 모듈 돌연변이, 동작 또는 getter를 호출 할 때는 전체 네임 스페이스를 제공해야합니다.

돌연변이와 getter에 대한 첫 번째 주장은 계속 지역 상태가 될 것이며, 행동으로 첫 번째 주장은 지역 상황/저장소가 될 것입니다.

Getters는 루트 상태와 루트 게터를 세 번째 및 네 번째 인수로 얻을 것입니다.

행동은 로컬 컨텍스트의 rootStore 속성에 의한 루트 컨텍스트에 액세스합니다.

 const moduleA = {
  state : {
    hello : 'world'
  } ,
  mutations : {
    sayHello ( state , payload ) {
      state . hello = payload ;
    }
  } ,
  actions : {
    change ( store , payload ) {
      store . commit ( 'sayHello' , payload ) ;
      store . rootStore . commit ( 'increment' ) ;
    }
  } ,
  getters : {
    hello ( state , getters , rootState , rootGetters ) {
      return `You have said hello ${ rootState . count } times to ${ state . hello } ` ;
    }
  }
} ;

const store = new Dragonbinder ( {
  state : {
    count : 0
  } ,
  mutations : {
    increment ( state ) {
      state . count ++ ;
    }
  } ,
  modules : {
    a : moduleA
  }
} ) ;

store . dispatch ( 'a.change' , 'John Doe' ) ;
console . log ( store . getters [ 'a.hello' ] ) ; // -> You have said hello 1 times to John Doe
console . log ( store . state . count ) // -> 1
console . log ( store . state . a . hello ) // -> John Doe

플러그인 시스템

Dragonbinder 에는 간단하지만 강력한 플러그인 시스템이 제공됩니다. 플러그인을 사용하여 핵심 기능을 확장하거나 완전히 변경할 수 있습니다.

플러그인 사용

 let store = new Dragonbinder ( ) ;
store . use ( myPlugin , ... options ) ;

플러그인 개발

Dragonbinder 플러그인은 저장 인스턴스와 함께 첫 번째 인수로 호출되고 선택적으로 전달 된 옵션이있는 경우 단일 함수를 내보내는 모듈입니다.

 const Dragonbinder = require ( 'dragonbinder' ) ;
const myPlugin = ( store , ... options ) => {

  Dragonbinder . myGlobalMethod = function ( ) {
    // Awesome code here
  } ;
  
  Dragonbinder . fn . myPrototypeMethod = function ( ) {
    // Awesome code here
  } ;

  store . myLocalMethod = function ( ) {
    // Awesome code here
  } ;
} ;