https://github.com/xizon/mobx-standalone-fundamentals-beginner__increment-decrement
Mobx standalone - Simple counter principle
https://github.com/xizon/mobx-standalone-fundamentals-beginner__increment-decrement
mobx
Last synced: about 2 months ago
JSON representation
Mobx standalone - Simple counter principle
- Host: GitHub
- URL: https://github.com/xizon/mobx-standalone-fundamentals-beginner__increment-decrement
- Owner: xizon
- License: mit
- Created: 2022-02-14T04:47:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-14T04:47:21.000Z (about 3 years ago)
- Last Synced: 2025-01-14T12:49:59.175Z (3 months ago)
- Topics: mobx
- Language: JavaScript
- Homepage:
- Size: 108 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mobx-standalone-fundamentals-beginner__increment-decrement
[English](README.md) | [中文](README_CN.md)
---
Mobx standalone - Simple counter principle
## File Structures
```sh
src/
└── index.js (Entry file, for client/browser)
```
## Installation And Test
**Step 1.** First, using an absolute path into your app folder directory.
```sh
$ cd /{your_directory}/mobx-standalone-fundamentals-beginner__increment-decrement
```
**Step 2.** Before doing all dev stuff make sure you have `Node 14+` installed. After that, run the following code in the main directory to install the node module dependencies.
```sh
$ sudo npm install
```
**Step 3.** Run this project with `create-react-app`
```sh
$ npm run start
```
**Step 4.** When you done, this will spin up a server that can be accessed at
```sh
http://localhost:3000
```
---
### index.js
```js
//store
import { makeObservable, observable, computed, action } from 'mobx';
class oneStore {
count = 0;
constructor() {
makeObservable(this, {
count: observable,
isNegative: computed,
increase: action,
decrease: action
});
}
get isNegative() {
return this.count < 0 ? 'Yes' : 'No';
}
increase() {
this.count += 1;
}
decrease() {
this.count -= 1;
}
}
//
const store = new oneStore();
function render(res) {
document.getElementById('root').innerHTML = JSON.stringify(res);
}
render(store);
//actions
document.getElementById('button-1').addEventListener( 'click', function(e) {
store.increase();
render(store);
});
document.getElementById('button-2').addEventListener( 'click', function(e) {
store.decrease();
render(store);
});
```
The decorator syntax can be written as:
```js
import {observable, computed} from "mobx";
class oneStore {
@observable count = 0;
constructor(count) {
this.count = count;
}
@computed get isNegative() {
return this.count < 0 ? 'Yes' : 'No'；
}
}
```
Use decorate to import:
```js
import {decorate, observable, computed} from "mobx";
class oneStore {
count = 0;
constructor(count) {
this.count = count;
}
get isNegative() {
return this.count < 0 ? 'Yes' : 'No'；
}
}
decorate(oneStore, {
count: observable,
isNegative: computed
})
```
### index.html
```html
Mobx Standalone
You need to enable JavaScript to run this app.
increment
decrement
```