composition api에서 vuex 모듈 getter를 사용하는 방법

composition api에서 vuex 모듈 getter를 사용하는 방법

이것은 나의 vuex getter입니다.

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

컴포넌트에 모듈을 Import하고 있습니다.

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

getter의 반환된 값을 반응형 객체에 저장하고 있습니다.

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

이것은 나에게 다음 함수를 반환한다.

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

다음을 시도합니다.movie = movieMod.getters.getMovieById(state)(parseInt(props.id).getMovieById는 함수를 반환하는 함수인 고차 함수입니다.이 경우 반환된 함수를 실행하지 않습니다.

모듈을 Import하는 대신 컴포지션 API에서 후크를 사용해야 한다는 것을 알게 되었습니다.

vuex에서 {useStore} Import;

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

언급URL : https://stackoverflow.com/questions/65528599/how-to-use-vuex-modules-getters-with-composition-api