I'm experiencing an issue with the vuex-Store. There is a state in my store that is not being updated when the Action is called. Can anyone help me out here? The problem lies with the "selectedHive" state. The axios call is functioning properly and getting the correct response. However, the Object is not being updated in the store.
Here are the relevant 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 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>