xxxx.$.xxxxがvue-mcの記法なのを無限に忘れる

仕事でたまにしかフロント真面目に読まないからVue独自の機能かそうじゃないのかわかんなくなる

vuemc.io

Reactも自前だとモデル管理とか無いのかな（よくわかってない）（フックとか勉強したけど使わないので忘れた）

そしてこのライブラリ、日本語記事が無さすぎる…！

仕事のコード見てると以下のどっちでも属性にアクセスできるっぽいので、何が違うのかよくわからん

task.name
task.$.name

これを理解するには、vue-mcにおける状態管理の仕組みについて知ってないといけない

Empty

空の状態。

モデルのdefaults()で定義した値がActive状態の初期値に割り当てられる。

class Task extends Model {

    // Default attributes that define the "empty" state.
    defaults() {
        return {
            id:   null,
            name: '',
            done: false,
        }
    }
}

Active

DBに保存する前の好き勝手に値を変更出来る状態。編集中の値。（入力中の値に連動して変化する？）

sync()でSaved状態の値を上書きする。（DBへの保存と同時に行う感じ？）

clear()でEmpty状態(=defaults()で定義した値)、reset()でSaved状態（DBで現状保存されている値）にそれぞれ戻せる。

Saved

DB*1上での状態。

以上を踏まえたうえで公式のこのサンプルコードを見る

let task = new Task({name: 'Get some sleep?'}) // Empty→Activeになる。同時にこの値がSavedとして保持される？

// Update the active state.
task.name = 'Do more work!'; // Active上の値が変わっただけ。Savedの値は変わらない

task.$.name;         // 'Get some sleep?'
task.saved('name');  // 'Get some sleep?'
// 上の2つはアクセスの仕方が違うだけでSavedの値を読み込んでいる

$を介してアクセスしたらSavedの、介さない場合はActiveの値を読み込んでるという解釈で取り合えず良さそう

まぁ発端となったPRは既に手が回らないままマージされていきましたが…

*1:DBじゃなくても永続化されたデータが保存されている場所であればそれ