【Nuxt.js】mapGettersで取得した値が更新されない

Question

Nuxt.jsを用いたアプリ作成中に、上記疑問にあたったので質問させてください

やりたいこと（概要）

ボタンをクリックした際に、APIと通信してデータを取得 => 取得した値を元に子のコンポーネントのviewを更新したい

やりたいこと（コード）

親のコンポーネント

<template>
  <div>
   <button @click="update">更新</button>
　　<Child />
  </div>
</template>

<script>
import Child from '~/components/Child'
export default {
  components: {
    Child
  },
  methods: {
   async update(){
     this.$store.dispatch('store/update')
   }
 }
}
</script>

子のコンポーネント

<template>
  <div>
    {{data}} <!--この値が更新されて欲しい-->  
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  computed: {
    ...mapGetters('store', ['data'])
  }
}
</script>

store

export const state = () => {
  data: []
}

export const getters = {
  data: (state) => state.data,
}

export const mutations = {
  setData(state, payload) {
    state.data = payload
  },
}

export const actions = {
  async update({ commit }) {
    //APIとの通信部（http pluginに関するコードは割愛）
    const { data, error } = await this.$http().get(
      url //urlが入る
    )
    if (error) {
      throw new Error('失敗')
    }
    commit('setData', data)
  },
}

起きている問題

子のコンポーネント内のdataが更新されない

状況確認（調べたこと）

• APIからのレスポンスは正常に返ってきており、かつ毎回変わっている（console.logで確認）
• mutationは正常に呼び出されており、payloadも正しく渡されている（console.logで確認）
• mapGettersをmapStateに変えて試してみたが、結果は変わらなかった(ボタン押下後も値は更新されなかった)

以上、素人質問で恐縮ですが、ご教示お願いいたします
また、上記コードは実際のコードを簡略化して書いたものですので、抜け漏れなどありましたらご容赦ください

Answer 1

storeのmutationでpayloadをセットしていますが、これだとstoreのdataが上書きされた状態になり、
ハンドリングが効かなくなります。（配列はオブジェクトの場合は要注意！）

例えば以下のようにしてみてはいかがでしょう？

配列のpushを使って、payloadから詰め替えるようにしてみてはいかがでしょう？