Vuex で別のゲッターからゲッターを呼び出すにはどうすればいいですか? 質問する

Vuex で別のゲッターからゲッターを呼び出すにはどうすればいいですか? 質問する

シンプルな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#プロパティスタイルアクセス

おすすめ記事