Question

摘要；

我正在调用api/getAll方法，该方法将返回所有数据。然后，我遍历状态。当我单击特定的“状态”时，会得到它的state.id，然后尝试使用获取请求来更新该特定的state.id，然后得到。但是-发生了什么，我必须刷新页面才能看到更改。

在父级组件中，我创建了一个

  <template>
      <div v-for="bird in Birds">
         <birdName :bird="bird" :key="bird.id"></birdName>
      </div>
   </template>

在同一父类中，我正在加载state

mounted() {

    this.$store.dispatch('getAllBirds')

  },

  computed: {

    ...mapState([
      'birds'

    ]),
    ```

（儿童vue）问题-它没有更新，我必须刷新页面才能看到更改

<template>
   <div v-if="bird.status == 'flying'">
        <v-btn>
          @click="getBird(bird)"
        >{{ bird.status }} </v-btn>
    </div>
<template>
export default {
  props: {
    bird: Object,
  }
}


 getBird: function ( bird ){

        axios.get(server + bird .id)
          .then(data => {
              console.log(data)
              this.$store.dispatch('updateBird', data)

            }
          )
          .catch(error => {
            console.log(error)
          })
      },

商店：

导出默认的新vuex.Store（{

state: {
    birds: [],
},

actions: {
  // Use Axios
  getAllBirds({ commit }){
      axios.get('URL/api/birds')
        .then( data => {
            let units = data.data
            commit('SET_BIRDS', birds)
          }
        )
        .catch(error => {
          console.log(error)
        })
  },

  updateBird({ commit }, payload ){
    commit('UPDATE_BIRDS',payload )
  },

},

mutations: {
    SET_BIRDS(state, birds){
      state.birds= birds
    },


    UPDATE_BIRDS: (state, payload) => {
    
       let updatedBird = state.units.find(data => data.id === payload.data.id)
       updatedBird = payload.data

    }

}
   
})

通过ID更新状态

0 个答案: