Array .find() method parameter undefined in vuex

Question

I've been struggling with the .find() method in a vuex getter.

I set up a store with a list in state (pages)

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

And a getter with a find method like in this post: 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;
  }
}

I expected to return the first object but after I map the getter (with mapGetters) in a component it throws this error.

TypeError: "page is undefined"

Also I tried the same code with .filter() method (which returns an array) but it does work without any errors. This code works:

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

The list, pages. But funny thing, it fix it (although there is a console statement and ESLint is going crazy). Edit: I mean by fix it, throws no error and is passing the data to the component. — Seba
– Seba, Commented Dec 24, 2019 at 1:02

Christian Carrillo · Accepted Answer · 2019-12-24 02:12:35Z

1

try with:

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

UPDATE: using 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>

edited Dec 24, 2019 at 2:12

answered Dec 24, 2019 at 1:01

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Seba Over a year ago

Same result. Was the first thing I tried and led me to that spaghetti code

Christian Carrillo Over a year ago

how are u calling your getter?

Loi Nguyen Huynh Over a year ago

Then indexPage will return a Function instead of a page right?

Christian Carrillo Over a year ago

there will return the object with the same id that the page param

Seba Over a year ago

Yes, then i pass the id (1). Return undefined.

|

Collectives™ on Stack Overflow

Array .find() method parameter undefined in vuex

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related