Using vuex store in Child Component don't work

Question

I've an Problem with the vuex-Store. Theres one state in my store which is not be updated, when the Action is called. Maybe anyone can support me here? The problem is the state of "selectedHive". The axios-call is working well and get the correct response. But the Object would not be updated in store.

Here are the involved files:

Store:

import merge from 'vuex'
import axios from 'axios'

export const state = () => ({
  selectedHive: {},
  hivesList: []
})

export const mutations = {
  set(state, hives) {
    state.hivesList = hives
  },
  add(state, value) {
    merge(state.hivesList, value)
  },
  remove(state, { hive }) {
    state.hivesList.splice(state.hivesList.indexOf(hive), 1)
  },
  setHive(state, hive) {
    state.selectedHive = hive
    console.table(state.selectedHive)
  }
}

export const actions = {
  async get({ commit }) {
    await this.$axios.get('http://localhost:8080/api/v1/hives').then((res) => {
      if (res.status === 200) {
        commit('set', res.data)
      }
    })
  },
  async show({ commit }, params) {
    await this.$axios
      .get(`http://localhost:8080/api/v1/hives/${params.id}`)
      .then((res) => {
        if (res.status === 200) {
          console.log('ID: ' + params.id)
          commit('setHive', res.data)
        }
      })
  },
  async set({ commit }, hive) {
    await commit('set', hive)
  },

  async getHive({ commit }, params) {
    console.log('getHive called' + params)
    return await axios
      .get(`http://localhost:8080/api/v1/hives/${params}`)
      .then((res) => {
        console.log(res.data)
        console.log(typeof res.data)
        commit('setHive', res.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }
}

Component:

<template>
  <div class="div-box">H: {{ selectedHive }}</div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  props: {
    hiveid: {
      type: String,
      required: true
    }
  },

  async fetch({ store }) {
    this.getHive(this.hiveid)
    console.log('Passing: ' + this.hiveid)
    await store.dispatch('hives/getHive', this.hiveid)
  },

  computed: {
    ...mapState({
      selectedHive: (state) => state.hive.selectedHive
    })
  },
  created() {
    console.log('id: ' + this.hiveid)
    this.getHive(this.hiveid)
  },

  methods: {
    ...mapActions('hives', ['getHive'])
  }
}
</script>

<style scoped>
.div-box {
  /* width: 49%; */
  border: 1px solid black;
  padding: 10px;
}
</style>

parent page:

<template>
  <div>
    <h1>Locations</h1>
    <!-- <div>LOCATIONS liste: {{ locationList }}<br /><br /></div>
    <div>Selected LOCATION: {{ selectedLocation }}<br /><br /></div> -->
    <div v-for="loc in locationList" :key="loc.id">
      <div class="div-box">
        u-Id: {{ loc._id }} <br />Name: {{ loc.name }} <br />
        Adresse: {{ loc.adress }} <br />
        Koordinaten: {{ loc.longitude }} , {{ loc.latitude }} Völker: <br />
        <div v-for="hive in loc.hives" :key="hive._id">
          {{ hive._id }}
          <hiveIcon :hiveid="hive.hiveId" />
        </div>
      </div>
      <br /><br />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import hiveIcon from '@/components/hiveIcon'

export default {
  components: {
    hiveIcon
  },

  computed: {
    ...mapState({
      locationList: (state) => state.locations.locationsList,
      selectedLocation: (state) => state.locations.selectedLocation,
      hivesList: (state) => state.hives.hivesList,
      selectedHive: (state) => state.hives.selectedHive
    })
  }
}
</script>

<style scoped>
.div-box {
  /* width: 49%; */
  border: 1px solid black;
  padding: 10px;
}
</style>

Answer 1

I would guess, that it's something related to your state structure and how you access it.

You have

export const state = () => ({
    selectedHive: {},
    hivesList: []
})

in your state, but when mapping you access hive before selectedHive:

...mapState({
    selectedHive: (state) => state.hive.selectedHive
})

Try to access it directly, like: selectedHive: (state) => state.selectedHive

EDIT:

Could you try to setup a watcher on that selectedHive?

    watch: {
        selectedHive: {
            deep: true,
            handler() {
                console.log('selectedHive has changed');
            }
         }
   }