javascript - vuex 中 Array .find() 方法参数未定义

Question

我一直在努力解决 vuex getter 中的 .find() 方法。

我建立了一个商店，其中包含状态列表(页面)

// state.js
const state = {
  pages: [{id:1, content:"Page 1"}, {id:2, content:"Page 2"}]
};

还有一个具有 find 方法的 getter，如本文所示:Reference

// getters.js
const getters = {
  indexPage: state => {
    let indexPage = state.pages.find(function(page) { // same error with arrow function
      return page.id === 1;
    });
    return indexPage !== undefined ? indexPage : null;
  }
}

我期望返回第一个对象，但是在我将 getter(使用 mapGetters)映射到组件中后，它会抛出此错误。

TypeError: "page is undefined"

我还尝试使用 .filter() 方法(返回一个数组)相同的代码，但它确实可以正常工作，没有任何错误。此代码有效:

const getters = {
  indexPage: state => {
    let indexPage = state.pages.filter(page => page.id === 1);
    return indexPage[0];
  }
}

Answer 1

尝试:

const getters = {
  indexPage: state => page => state.pages.find(p => p.id === page)
}

更新:使用mapGetters

const store = new Vuex.Store({
  state: {
    pages: [
      {id:1, content:"Page 1"}, 
      {id:2, content:"Page 2"}
    ]
  },
  getters: {
    indexPage: state => page => state.pages.find(p => p.id === page)
  }
})

const mapGetters = Vuex.mapGetters

new Vue({
  el: '#app',
  store,
  mounted () {
    console.log(this.indexPage(1))
  },
  computed: {
    ...mapGetters([
      'indexPage'
    ])
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>