PIYO - Tech & Life -

Vue コンポーネントのデータを初期値にリセットしたいとき

Vue JS

どうやって書くのがいいのかなーと迷いました。

例として適切ではないですが、例えば↓のようなコンポーネントがあったとして、なにかのタイミングですべてのデータをリセットしたいとします。

export default {
  name: "App",
  data() {
    return {
      title: 'Hello World',
      message: 'your todo app',
      todos: []
    }
  },
}

何も考えずに書くと、

this.title = 'Hello World'
this.message = 'your todo app'
this.todos = []

みたいになりますが、項目が増えたときに破綻するのは目に見えています。

そこでこちらの$dataを使います。

API — Vue.js
Vue.js - The Progressive JavaScript Framework
jp.vuejs.org

この$dataにデータオブジェクトが入っているので、まとめて値をセットするときには$dataへのアサインで代用できます。

// 外に関数を1つつくっておく
function initialState() {
  return {
    title: 'Hello World',
    message: 'your todo app',
    todos: []
  }
}

export default {
  name: "App",
  data() {
    // 初期値として関数呼び出しの結果を返す
    return initialState()
  },
  methods: {
    reset: function() {
      // リセット時は`$data`にアサイン
      Object.assign(this.$data, initialState());
    },
  }
}

これで一応動いてくれました。

もっといい方法があるとか、これだとだめな理由があるとかの場合はお知らせしてもらえると嬉しいです。

追記

↑の方法では、途中で新しいプロパティをthis.data追加した場合にそのプロパティが残ったままになってしまいます。

this.data.memo = 'hogehoge'

その場合、一度すべてのプロパティを一度削除してから上記のassignのコードを実行するのが無難です。

export default {
  methods: {
    reset: function() {
      Object.keys(this.$data).forEach(key => delete this.$data[key])
      Object.assign(this.$data, initialState());
    },
  }
}