在子组件中使用vuex store不工作

Question

我有一个vuex-Store的问题。当调用Action时，我的商店中有一个状态没有被更新。也许有人能帮我解决这个问题？问题出在 "selectedHive "的状态上。axios-call工作良好，并且得到了正确的响应。但是对象在存储中没有被更新。

以下是相关文件。

商店：

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>

母页。

<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

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

你有

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

在您的州，但当映射时，您可以访问 hive 之前 selectedHive:

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

试着直接访问它，比如。selectedHive: (state) => state.selectedHive

EDIT:

你能不能试着在那上面设置一个观察者？selectedHive?

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