Не определено при вызове геттера для получения элемента по идентификатору

Question

резидент. js

state : {
    residents: []
},
getters:{
  getResidentsById: (state) => (id) => {
        return state.residents.find(resident => resident.id === id)
 }

}

Медикаментозное лечение. vue

data() {
   return { medications: [],
},
computed: {
   ...mapGetters([
        'allMedications',  //this returns all the list of medication
        'getResidentsById',
    ]),
 },
 method: {
    getResidentName(id) {
      const resident = this.getResidentsById(id)
      return resident && resident.name
    },
 },
 watch: {
    allMedications() {
      const medicationArray = this.allMedications
      this.medications = medicationArray.map(medication => 
    ({
        ...medication,
        residentName: this.getResidentName(medication.resident)
    })
    );
    },
 }

Я хотел установить residentName prop в список лекарств список, передав идентификатор резидента из лекарства. Я получаю undefined при вызове getResidentsById . Объект лекарства содержит резидентный ключ, значение которого является идентификатором резидента.

Answer 1

// residents.js

import Vue from 'vue'

const state = {
    residents: {}
}

const mutations = {
    RESIDENT_ADD (state, value) {
        Vue.set(state.residents, value.residentId, value)
    }
}

const actions = {
}

const getters = {
    getResidents: state => {
        const arr = []
        for (const key in state.residents) {
            const obj = state.residents[key]
            arr.push(obj)
        }
        return arr
    },
    getResidentById: state => id => {
        const obj = state.residents[id] ? state.residents[id] : null
        return obj
    }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

это должно сработать.

кстати. избегайте использования массивов в состоянии, так как это вызывает много геттеров, если вы удаляете или добавляете элемент в массив.

, если вам нужен массив для представления, задайте для него c геттер.