[FE] hello-mobx
npm init
2. 설치 개발 환경 의존
npm install --save-dev \
babel-core \
babel-loader \
babel-preset-es2015 \
babel-preset-stage-0 \
babel-plugin-transform-decorators-legacy
3. 설치 모듈 의존성
npm install --save mobx
4. 신규
./.babelrc 및 ./webpack.config.js 두 파일(1).babelrc
{
"presets": [
"es2015",
"stage-0"
],
"plugins": [
"transform-decorators-legacy"
]
}
(2)webpack.config.js
const path = require('path');
module.exports = {
entry: {
index: './index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
libraryTarget: 'umd'
},
module: {
loaders: [{
test: /.js$/,
loader: 'babel-loader'
}]
}
};
5. 예
(1) 디렉토리 구조
+ dist //
+ node_modules //
.babelrc
index.html
index.js
package-lock.json //
package.json
webpack.config.js
(2)index.js
import { observable, action, computed, autorun } from 'mobx';
class Store {
@observable n = 0;
@action inc() {
this.n++;
}
@computed get result() {
return this.n * 2;
}
};
const store = new Store();
setInterval(() => {
store.inc();
}, 1000);
autorun(() => {
console.log(store.result); //0 2 4 6 8 ...
});
주: (1)
@observable는 속성 장식기로서 mobx는 대상의 속성 값의 변경을 감시하는 데 사용된다.(2)@action는 뒤의 함수가observable의 변경을 초래할 수 있음을 가리키는 데 사용되며@action 장식기는 생략할 수 있다.(3)@computed는 기존의 상태에 따라 계산된 일부 값이다. 예를 들어 본 예store에서는 상태n만 있고 result는 n에 따라 계산된 것이다.(4)autorun는 자동으로 리셋 함수를 터치합니다. 리셋 함수는 한 번 호출한 다음에 store의 상태가 바뀔 때마다 다시 터치합니다.참고 자료
MobX TC39 Stage 2: Class and Property Decorators 효율적인 MobX
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
