Javascript 在子组件don'；行不通

我对vuex商店有问题。调用操作时，我的存储中有一个状态未更新。也许有人能支持我？问题是“selectedHive”的状态。axios调用工作正常，并得到正确响应。但该对象不会在存储中更新

以下是涉及的文件：

商店：

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)
      })
  }
}

组成部分：

<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>

H:{{selectedHive}}
从“vuex”导入{mapState，mapActions}
导出默认值{
道具：{
hiveid：{
类型：字符串，
必填项：true
}
},
异步获取（{store}）{
this.getHive（this.hiveid）
console.log（'Passing:'+this.hiveid）
等待存储调度（'hives/getHive'，this.hiveid）
},
计算：{
…地图状态({
selectedHive：（状态）=>state.hive.selectedHive
})
},
创建（）{
console.log（'id:'+this.hiveid）
this.getHive（this.hiveid）
},
方法：{
…映射操作（'hives'，['getHive']））
}
}
.分区箱{
/*宽度：49%*/
边框：1px纯黑；
填充：10px；
}

父页面：

<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>

位置
u-Id:{{loc.\u-Id}}
名称：{{{loc.Name}}

地址：{{loc.address}}

Koordien:{{loc.longitude}}、{{{loc.latitude}}Völker:

{{hive.\u id}



从“vuex”导入{mapState}
从“@/components/hiveIcon”导入hiveIcon
导出默认值{
组成部分：{
海维康
},
计算：{
…地图状态({
locationList：（state）=>state.locations.locationsList，
selectedLocation：（状态）=>state.locations.selectedLocation，
hivesList：（state）=>state.hives.hivesList，
selectedHive：（状态）=>state.hives.selectedHive
})
}
}
.分区箱{
/*宽度：49%*/
边框：1px纯黑；
填充：10px；
}

我猜，这与您的状态结构和访问方式有关

你有

export const state=（）=>({
所选配置单元：{}，
hivesList:[]
})

在您的状态下，但在映射时，您在

选择的hive

之前访问

hive

：

…映射状态({
selectedHive：（状态）=>state.hive.selectedHive
})

尝试直接访问它，如：

selectedHive:（state）=>state.selectedHive

编辑：

您能尝试在

选定的蜂窝上设置一个监视程序吗

观察：{
选定的蜂窝：{
深：是的，
handler（）{
log（'selectedHive已更改'）；
}
}
}
我想知道
设置了
吗？我注意到组件映射到了
state.hive.selectedHive
，但是您的其余代码使用
hives
作为模块名，所以我猜映射应该是到
state.hives.selectedHive
（强调hives）。@tony19：这就是问题所在，谢谢：-）谢谢你的快速支持：-）不幸的是，这不是问题所在。“hive”是商店的名称。对于hivesList[]来说，它的工作非常完美，只是selectedHive没有更新。。。。