Vueでオブジェクトを変更したい時どうするか？

Vueのdata()関数で返すステート（オブジェクト）についての話。

取得は通常のJSのオブジェクトの操作と同様にキーを使えば問題なかったが、
追加と削除で嵌ったので備忘録として残しておく。

以下、参考にしたページ

次のようなVueコンポーネントのdata()でcharaObjという空のオブジェクトを返すとする。
つまり、このコンポーネントでは、初期ステートとしてcharaObjというオブジェクトが存在することになる。

hoge.vue

// 初期状態のステート
export default {
  data () {
    return {
      charaObj: {}
    }
  }
}

プロパティを追加する

プロパティを追加したい時、通常のJSのオブジェクト同様obj.key = valとやってしまいたくなるがこれだとリアクティブにデータが反映されない（＝データ更新しても画面(HTML)上に反映されない）ので、ダメということらしい。

// リアクティブにデータが反映されないのでこの書き方はダメ
this.charaObj.hero = '範馬刃牙'

プロパティを追加したい時は$setを使う。

慣れない書き方だが、これでリアクティブにプロパティを追加できる。
第１引数にプロパティの追加先のオブジェクトを、第２引数にキー、第３引数に値を渡す。

// リアクティブになるやつ
this.$set(this.charaObj, 'hero', '範馬刃牙')  // => this.charaObj: {hero: '範馬刃牙'}

複数のプロパティをもつオブジェクトを追加したい場合はよくあるだろう。
この場合はスプレッド演算子...を使って追加したいプロパティを含むオブジェクトを展開すればOK。

スプレッド演算子を使ったやり方

this.charObj = {...this.charObj, parent: '範馬勇次郎', friend: '烈海王'}

またはObject.assign()を使って新しいオブジェクトを作って代入する方法でもできるらしい。

Object.assign()を使ったやり方

this.charaObj = Object.assign({}, this.charaObj, {parent: '範馬勇次郎', friend: '烈海王'})

追加の時と同じで、いつも通りに削除しようとするとリアクティブにならない。

// リアクティブにデータが反映されないのでこの書き方はダメ
delete this.charaObj.hero

プロパティを削除したい時は$deleteを使う。第１引数に対象のオブジェクトを、第２引数に削除したいプロパティのキーを渡す。

// リアクティブにデータを削除
this.$delete(this.charaObj, 'hero')

最初、空のオブジェクトを再代入で初期化できないかと考えたが、うまくいかなかった。

// 再代入はうまくいかない
this.obj = {}

この場合は、キーの配列をObject.keys()で取得してループで$deleteを使って削除したところうまくいった。

// プロパティを全削除 
Object.keys(this.charObj).forEach(key => {
    this.$delete(this.charObj, key)
})

リアクティブにコンポーネントのステートを削除するには先に書いた$deleteを使う。

オブジェクトを一度空にしてからまとめて追加すればよい

あまり使うケースは無さそうだが、プロパティではなくステート自体（コンポーネントのトップレベルのプロパティ）を削除したい場合はどうするか？

$deleteを使いたくなるところだが、トップレベルプロパティを削除する時に$deleteを使おうとすると警告が出るので使っちゃダメっぽい。

// トップレベルのプロパティを削除しようとエラーが出る
this.$delete(this, 'charObj')

この場合はnullを入れればよいみたい。

// charObjを削除する
this.charObj = null