数组.find（）方法参数在vuex中未定义

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>