web-dev-qa-db-ja.com

Vuexの別のゲッターからゲッターを呼び出すにはどうすればよいですか？

簡単なVueブログを考えてください：
Vuexをデータストアとして使用しています。2つの getters を設定する必要があります。IDでgetPostを取得するためのpostゲッターと、各特集記事の最初の数文字を返すlistFeaturedPosts。注目の投稿リストのデータストアスキーマは、投稿をIDで参照します。これらのIDは、抜粋を表示するために、実際の投稿に解決する必要があります。

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ゲッターとして呼び出すにはどうすればよいですか？

vuejs2vuex
41
jSepia

アンジーの答えは近い…。

VueJS 2.0では、stateとgettersを渡します。したがって、これはstore/getters.jsで動作するはずです。

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

stateなしでテストしましたが、vuejs 2.5.16では動作しませんでした。 stateが必要な理由です。

これは動作します：

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

これはうまくいきませんでした

export default foo = (getters) => {
    return getters.yourGetter
}
10
Jose Seie

gettersを2番目の引数として渡し、ローカルおよび非名前空間のゲッターにアクセスします。名前空間付きモジュールの場合、rootGettersを使用する必要があります（別のモジュール内で定義されたゲッターにアクセスするには、4th引数として）：

export default foo = (state, getters, rootState, rootGetters) => {
    return getters.yourGetter === rootGetters['moduleName/getterName']
}
5
bruddha

ゲッターは他のゲッターを2番目の引数として受け取ります

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
OziOcb