Vue・Vuex の store の stateの変更を検知する方法 (computed と watch を活用する)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Vue・Vuex の stateの変更をcomputed と watchを使って検知する方法について解説していきます。

1 Vue・Vuex の stateの変更をcomputed と watchを使って検知する方法
- 1.1 Vuex の Store： index.jsファイル
- 1.2 Storeの Stateの変更を検知したい Component
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

Vue・Vuex の stateの変更をcomputed と watchを使って検知する方法

Vuexの Store内で管理する Stateの変更を検知したい時があると思います。

そんな時は、computed と watchを使って検知するのが簡単なので、おすすめです。

SampleCodeを掲載しますので、ぜひ活用してみてください。

Vuex の Store： index.jsファイル

Sampleの Vuex の Store index.jsファイルは次のとおりです。

// 1. Store_State で、Globalに管理したい Dataを管理する
export const state = () => ({
  // 1-1. UserData_Object
  user: {},
  // 1-2. CartItemList
  cartItemList: [],
});

// 2. Gettersから、Vue_Component たちは、Stateを受け取る
export const getters = {
  user: (states) => JSON.parse(JSON.stringify(states.user)),
  cartItemList: (states) => JSON.parse(JSON.stringify(states.cartItemList)),
};

// 3. Mutation で、Store_State を Updateする
export const mutations = {
  setUser: (states, user) => (states.user = user),
  setCartItemList: (states, itemList) => (states.cartItemList = itemList),
};

Storeの Stateの変更を検知したい Component

Storeの Stateの変更を検知したい Componentでは、

次のようにcomputedで storeから stateを取得して、それを watch で変更を検知するようにcomputedを登録しています。

  data() {
    return {
      user: {},
      cartItemList: [],
    };
  },
  computed: {
    // 1. computed で、Storeから Stateを取得する
    getUserData() {
      return this.$store.getters.user;
    },
    getCartItemList() {
      return this.$store.getters.cartItemList;
    },
  },
  // 2. watch に変更を検知する_Computedたちを登録している
  watch: {
    // 3. Store.State が変更されたら、watchが検知する
    getUserData(newValue, oldValue) {
      this.user = newValue;
    },
    getCartItemList(newValue, oldValue) {
      this.cartItemList = newValue;
    },
  },