Vuex의 다른 getter에서 어떻게 getter를 호출합니까?


108

간단한 Vue 블로그를 생각해보십시오.
저는 Vuex를 데이터 저장소로 사용하고 있으며 두 개의 getter 를 설정해야합니다 . ID getPost로 검색하는 getter 와 각 추천 게시물의 처음 몇 문자를 반환 하는 getter입니다 . 추천 게시물 목록의 데이터 저장소 스키마는 해당 ID로 게시물을 참조합니다. 이러한 ID는 발췌 내용을 표시하기 위해 실제 게시물로 확인되어야합니다.postlistFeaturedPosts

store / state.js

export const state = {
  featuredPosts: [2, 0],
  posts: [
    'Lorem et ipsum dolor sit amet',
    'Lorem et ipsum dolor sit amet',
    'Lorem et ipsum dolor sit amet',
    'Lorem et ipsum dolor sit amet',
    'Lorem et ipsum dolor sit amet',
  ]
}

store / getters.js

export default getPost = (state) => (postID) => {
  return state.posts[postID]
}

export default listFeaturedPosts = (state, getters) => () => {
  console.log(getters) // {}

  return state.featuredPosts.map(postID => getters.getPost(postID).substring(0, EXCERPT_LENGTH);
}

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations
})

문서에 따르면 getters매개 변수를 사용하여 다른 게터에 액세스 할 수 있습니다. 그러나 getters내부 listFeaturedPosts에서 액세스하려고하면 비어 있고 getters.getPost해당 컨텍스트에서 정의되지 않아 콘솔에 오류가 발생합니다 .

위의 예 getPost에서 내부 listFeaturedPosts에서 Vuex getter로 어떻게 호출 합니까?

답변:



18

패스 getters액세스 로컬 및 비 네임 스페이스 게터에 두 번째 인수로. 네임 스페이스 모듈의 경우 다음을 사용해야합니다 rootGetters( 다른 모듈 내에 정의 된 getter에 액세스하려면 네 번째 인수로).

export default foo = (state, getters, rootState, rootGetters) => {
    return getters.yourGetter === rootGetters['moduleName/getterName']
}

3
이것은 다른 vuex 모듈의 getter가 필요한 사람들에게 유용합니다. 나는 인수가 작동하려면 인수가 생략되지 않고 답변에 표시된 특정 순서로 있어야 함을 강조하고 싶었습니다.
LJH

13

나는없이 테스트 state했지만 작동하지 않았습니다. 그것이 state필요한 이유 입니다.

이것은 작동합니다 :

export default foo = (state, getters) => {
    return getters.yourGetter
}

이것은 작동하지 않았다

export default foo = (getters) => {
    return getters.yourGetter
}

1
Vue 버전에서는 작동하지 않는다고 덧붙이고 싶습니다. 객체 분해를 명명 된 인수와 혼동해서는 안됩니다 ( '상태'를 생략하라는 원래 제안의 답변 참조). 그것은 참으로 (state, getters)
Igor Zinken

2
두 번째 예에서는 state개체의 이름을 지정 getters하고 실제 getters개체 가 될 두 번째 인수를 무시 합니다. getters이 예에서 내부적 으로 살펴보면 실제로 상태 객체임을 알 수 있습니다.
mraaroncruz

12

게터 는 두 번째 인수 로 다른 게터를받습니다.

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

다음은 공식 문서에 대한 링크입니다-https: //vuex.vuejs.org/guide/getters.html#property-style-access


2
대한 엄지 손가락 : 문서의 적절한 위치에 대한) 명확한 코드 예제 나) 링크
Katinka에 페네호르

1
대신 이렇게 쓰는 것이 다른가요? getters : {doneTodos : state => {return state.todos.filter (todo => todo.done)}, doneTodosCount : (state, getters) => {return this.getters.doneTodos.length}}
Rivo

내가 아는 한 @Rivo는 할 수 없습니다. 시도하면 다음과 같은 오류가 표시됩니다. [Vue 경고] : 렌더링 오류 : "TypeError : 정의되지 않은 속성 'getters'를 읽을 수 없습니다."
OziOcb

-3

state 를 전달하는 대신 getter를 전달한 다음 원하는 다른 getter를 호출하십시오. 도움이 되었기를 바랍니다.

귀하의 store / getters.js에서

export default foo = (getters) => {
   return  getters.anyGetterYouWant
}

2
Object destructuring을 인수와 혼동하고 있다고 생각합니다. 함수에 대한 첫 번째 인수는 상태이고 두 번째 인수는 getters 개체입니다. 첫 번째 인수의 이름을 'getters'로 지정할 수 있지만 여전히 상태입니다! 당신은 찾고 있습니다 : export default foo = (state, getters) => ...
Igor Zinken

또는export default foo = ({ getters }) => { return getters.anyGetterYouWant }
GaryMcM
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.