今日は、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