Vue 계산 속성이 상태 변경에 응답하지 않음

Vue 계산 속성이 상태 변경에 응답하지 않음

왜 그런지는 알 수긍할 수긍이 안 돼요.details다음 구성 요소의 계산된 속성이 업데이트되지 않는 경우fetch()메서드는 다음과 같습니다.

<template>
  <div>
  {{ haveData }} //remains undefined
  </div>
</template>

<script>
export default {
  props: {
    group: {
      type: Object,
      required: true
    },
  },
  computed: {
    currentGroup() {
      return this.$store.getters['user/navbar_menu_app_current_group'](
        this.group.id
      )

      /*-- which is the following function 
        navbar_menu_app_current_group: state => item => {
        return state.menu.find(m => {
          return m.id == item
        })
        }
      */

      /*-- this function returns an object like so 
        {
          id: 1,
          label: 'kity cats',
        }
        ***details --> IS NOT DEFINED. If I add it to the current group as null, my problem goes away. However, this is a previous API call that does not set the `details` parameter.
      */
    },
    details() {
      let c = this.currentGroup.details
      console.log(c) // returns undefined, which makes sense, but it should be updated after this.fetch() is called
      return c
    },
    haveData() {
      return this.details != null
    }
  },
  methods: {
    async fetch() {
      await this.$store.dispatch(
        'user/navbar_menu_app_details_get',
        this.group.id
      )
      //This is setting the "details" part of the state on menu which is referred to in the computed properties above
      //Previous to this there is no state "this.group.details"
      //If I add a console log to the mutation the action calls, I get what is expected.
    }
  },
  created() {
    if (!this.haveData) {
      this.fetch()
    }
  }
}
</script>

포함할 배열 항목을 변경하는 경우details동작:

{
  id: 1,
  label: 'kity cats',
  details: null  // <-- added
}

뛰어오르다details불필요해 보입니다.필요가 없을지도 모르기 때문입니다.

계산 속성을 추가하지 않고 어떻게 하면 동작하도록 할 수 있을까요?details:null디폴트 상태로 되돌릴 수 있습니까?

시행 1:

// Vuex mutation
navbar_menu_app_details_set(state, vals) {
  let app = state.menu.find(item => {
    return item.id == vals[0] //-> The group id passing in the dispatch function 
  })

  //option 1 = doesn't work
  app = { app, details: vals[1] } //-> vals[1] = the details fetched from the action (dispatch)

  //option 2 = doesnt work
  app.details = vals[1]

  //option 3 = working but want to avoid using Vue.set()
  import Vue from 'vue' //Done outside the actual function
  Vue.set( app, 'details', vals[1])
},

시행 2:

// Vuex action
navbar_menu_app_details_get(context, id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      context.commit('navbar_menu_app_details_set', [
        context.getters.navbar_menu_app_current(id), //-> the same as find function in the mutation above
        apps[id]
      ])
      resolve()
    }, 1000)
  })
}

// --> mutation doesn't work
navbar_menu_app_details_set(state, vals) {
  vals[0].details = vals[1]
},

Vue 인스턴스는 Vuex 변환에서 다음 방법으로 사용할 수 있습니다.this._vm를 사용할 수 있습니다.Vue.set()추가하다details메뉴 항목:

navbar_menu_app_details_set(state, vals) {
  let app = state.menu.find(item => {
    return item.id == vals[0]
  })

  this._vm.$set(app, 'details', vals[1])
},

Vue의 모든 개체는 반응적이며 개체가 재할당될 때만 변경 내용이 캡처되고 변경 내용이 감지되도록 설계되었습니다.

따라서 당신의 경우, 다음을 따르는 것이 좋습니다.

app = { ...app, details: vals[1] }

언급URL : https://stackoverflow.com/questions/58127802/vue-computed-property-not-responding-to-state-change