Получатель не возвращает значение, как ожидалось

Question

Почему, когда я вызываю

getters.getEventById(id)

, не работаю так же, когда я вызываю

state.events.find(event => event.id === id)

Посмотрите на оба console.log в начале действия fetchEvent.

  fetchEvent({ commit }, id) {
    var event = getters.getEventById(id)
    console.log(event)
    console.log(state.events.find(event => event.id === id))
    if (event) {
      commit('SET_EVENT', event)
    } else {
      EventService.getEvent(id)
        .then(response => {
          commit('SET_EVENT', response.data)
        })
        .catch(error => {
          console.log(error.response)
        })
    }
  }
}

export const getters = {
  getEventById: state => id => {
    return state.events.find(event => event.id === id)
  }
}

Результат:

Answer 1

Кажется, в вашем фрагменте отсутствует какой-то код: как fetchEvent имеет доступ к state и getters? Обычно действия Vuex получают state и getters через их первый аргумент.

Я взял ваш код, поместил его в простой шаблон Vuex, немного изменил его рефакторинг и это работает, как и следовало ожидать.

Vue.component('event', {
  template: '<div></div>',
  created() {
    this.$store.dispatch('fetchEvent', 1);
  },
});

const store = new Vuex.Store({
  state: {
    events: [{
        id: 1
      },
      {
        id: 2
      },
      {
        id: 3
      },
    ]
  },
  actions: {
    fetchEvent({
      commit,
      state,
      getters,
    }, id) {
      var event = getters.getEventById(id)
      console.log('getter:', event)
      console.log('local find:', state.events.find(event => event.id === id))
    }
  },
  getters: {
    getEventById: state => id => {
      return state.events.find(event => event.id === id)
    }
  }
})

const app = new Vue({
  store,
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <event></event>
</div>