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.