Vuexでオブジェクトのプロパティの値の変更を検知したいときの対処法！！

今日は、Vuexについての記事を書いていこうかなと思います。

Vuexでオブジェクトのプロパティの値を変更しても、値の変更は検知されません。（これで３,４時間くらい時間食われた）

これは、Vue本来の仕様にになっておりどうしようもすることはできません。

では、どうやってプロパティの変更を検知してくれるのでしょうか？

結論から言うと、オブジェクト自体を書き換えるという動作をします。

めんどくさいですよね。

でも大丈夫！

同じようなことで頭を抱える人に、とっておき解決策をご用意しております。

ぜひ皆さんのお力になれればなと思います！！

それでは、順を追って説明していきます。

オブジェクトのコピーを作成

今回は、userというオブジェクトを例に挙げて説明していきます。

store/index.js

state: {
    user: {}, // user情報
  },

changeUserPhotoURL(state, payload) {
      let user = Vue.util.extend({}, state.user)
    },

Vue.util.extendでコピーを作成し、第一引数には肩を定義します。第二引数には、コピーする対象を選択します。

プロパティの値を変更し、元のオブジェクトに代入

今回は、ユーザーのプロフィール画像（photoURL）を変更します。

store/index.js

state: {
    user: [], // user情報
  },

changeUserPhotoURL(state, payload) {
      let user = Vue.util.extend({}, state.user)
      user.photoURL = payload
      state.user = user
    },

state.user = userこの部分は、元のオブジェクト（state.user）にコピー、編集したオブジェクト（user）を代入しています。

ページの読み込み

this.$router.go()

最後に、routerなどを使ってページのリロードを行いましょう！

このようにして、オブジェクトのプロパティの値の変更を検知してくれます。

いかがだったでしょうか？

これで時間を潰すなんてもったいないですよね？？

なので、この記事を参考にしてぜひ学習を進めていってください！

以上、「Vuexでオブジェクトのプロパティを変更したいときの対処法！！」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading