간단한 Vue 블로그를 생각해보십시오.
저는 Vuex를 데이터 저장소로 사용하고 있으며 두 개의 getter 를 설정해야합니다 . ID getPost
로 검색하는 getter 와 각 추천 게시물의 처음 몇 문자를 반환 하는 getter입니다 . 추천 게시물 목록의 데이터 저장소 스키마는 해당 ID로 게시물을 참조합니다. 이러한 ID는 발췌 내용을 표시하기 위해 실제 게시물로 확인되어야합니다.post
listFeaturedPosts
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로 어떻게 호출 합니까?
답변
VueJS 2.0에서는 state
및 getters
.
getter는 두 번째 인수 로 다른 getter에 전달됩니다 .
export default foo = (state, getters) => {
return getters.yourGetter
}
공식 문서 : https://vuex.vuejs.org/guide/getters.html#property-style-access
답변
패스 getters
액세스 로컬 및 비 네임 스페이스 게터에 두 번째 인수로. 네임 스페이스 모듈의 경우 다음을 사용해야합니다 rootGetters
( 다른 모듈 내에 정의 된 getter에 액세스하려면 네 번째 인수로).
export default foo = (state, getters, rootState, rootGetters) => {
return getters.yourGetter === rootGetters['moduleName/getterName']
}
답변
나는없이 테스트 state
했지만 작동하지 않았습니다. 그것이 state
필요한 이유 입니다.
이것은 작동합니다 :
export default foo = (state, getters) => {
return getters.yourGetter
}
이것은 작동하지 않았다
export default foo = (getters) => {
return getters.yourGetter
}
답변
게터 는 두 번째 인수 로 다른 게터를받습니다.
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
답변
state 를 전달하는 대신 getter를 전달한 다음 원하는 다른 getter를 호출하십시오. 도움이 되었기를 바랍니다.
귀하의 store / getters.js에서
export default foo = (getters) => {
return getters.anyGetterYouWant
}