1

This is my Vuex getter:

const getters = {
  getMovieById: state => id => {
    debugger;
    return state.movies.find(movie => movie.id === id);
  }
};

I am importing the module in my component:

import movieMod from "../store/modules/movies";

I am storing the returned value of the getter in my reactive object:

 movie = movieMod.getters.getMovieById(parseInt(props.id));

This is returning me the following function:

(id) {
  debugger;
  return state.movies.find(function (movie) {
    return movie.id === id;
  });
}

2 Answers 2

1

Try the following:

movie = movieMod.getters.getMovieById(state)(parseInt(props.id)

getMovieById is a higher-order function, which is a function that returns a function. In your case, you are not executing the returned function.

0

I figured out my approach was wrong. I was supposed to use the hook from the composition API rather than importing the module.

import { useStore } from "vuex";

setup(props) {
  const store = useStore();
  return {
    movie: computed(() => store.getters.getMovieById(parseInt(props.id)))
  };
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.