シンプルなVueブログを考えてみましょう。
データストアとしてVuexを使用しており、2つのゲッター: ID でgetPost
を取得するためのゲッターpost
と、listFeaturedPosts
各注目の投稿の最初の数文字を返す 。注目の投稿リストのデータストア スキーマは、投稿を ID で参照します。抜粋を表示するには、これらの ID を実際の投稿に解決する必要があります。
ストア/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',
]
}
ストア/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);
}
ストア/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
内部から Vuex ゲッターとして呼び出すにはどうすればよいでしょうか?listFeaturedPosts
ベストアンサー1
VueJS 2.0 では、state
と の両方を渡す必要がありますgetters
。
ゲッターは他のゲッターに渡される2番目の議論:
export default foo = (state, getters) => {
return getters.yourGetter
}
公式ドキュメント:https://vuex.vuejs.org/guide/getters.html#プロパティスタイルアクセス