1. ホーム
  2. vuejs2

[解決済み] Vuexで他のゲッターからゲッターを呼び出すにはどうすればよいですか?

2022-04-29 01:40:48

質問

シンプルなVueのブログを考えてみましょう。

データストアとしてVuexを使用しており、2つのデータストアをセットアップする必要があります。 ゲッター : a getPost を取得するためのゲッターです。 post をIDで、また listFeaturedPosts は、各特集記事の最初の数文字を返します。注目の投稿リストのデータストアスキーマは、投稿をそのIDで参照しています。これらの ID は、抜粋を表示するために実際の投稿に解決される必要があります。

ストア/ステート.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',
  ]
}

ストア/ゲッターズ.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 というのは、上記の例では?

どのように解決するのですか?

VueJS 2.0では、このような場合に限って stategetters .

ゲッターは他のゲッターに 第2引数 :

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

公式のドキュメントです。 https://vuex.vuejs.org/guide/getters.html#property-style-access