observable-decorator.md

Error in user YAML: (<unknown>): found character that cannot start any token while scanning for the next token at line 1 column 8

---
title: @observable
sidebar_label: @observable
hide_title: true
---

@observable

<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBD4KQ7&placement=mobxjsorg" id="_carbonads_js"></script>

egghead.io lesson 1: observable & observer

<iframe style="border: none;" width=760 height=427 src="https://egghead.io/lessons/javascript-sync-the-ui-with-the-app-state-using-mobx-observable-and-observer-in-react/embed" ></iframe>

Hosted on egghead.io

egghead.io lesson 4: observable objects & maps

<iframe style="border: none;" width=760 height=427 src="https://egghead.io/lessons/react-use-observable-objects-arrays-and-maps-to-store-state-in-mobx/embed" ></iframe>

Hosted on egghead.io

Decorator that can be used on ES7- or TypeScript class properties to make them observable. The @observable can be used on instance fields and property getters. This offers fine-grained control on which parts of your object become observable.

import { observable, computed } from "mobx"

class OrderLine {
    @observable price = 0
    @observable amount = 1

    @computed get total() {
        return this.price * this.amount
    }
}

If your environment doesn't support decorators or field initializers, use decorate instead (see decorators for details).