Getter没有如期返回值

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 boilerplate 中，重构了一下，它就像你期望的那样工作了。

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>