Vuex'teki başka bir alıcıdan alıcıyı nasıl arayabilirim?


106

Basit bir Vue blogu düşünün:
Veri depom olarak Vuex kullanıyorum ve iki alıcı kurmam gerekiyor : ID'ye göre bir getPostalıcı ve öne çıkan her gönderinin ilk birkaç karakterini döndüren bir alıcı . Öne çıkan gönderiler listesi için veri deposu şeması, gönderilere kimliklerine göre başvurur. Alıntıların gösterilmesi amacıyla bu kimliklerin gerçek gönderilere çözümlenmesi gerekir.postlistFeaturedPosts

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
})

Belgelere göre, gettersparametre diğer alıcılara erişmek için kullanılabilir. Ancak gettersiçeriden erişmeye çalıştığımda listFeaturedPostsboş ve getters.getPostbu bağlamda tanımsız olduğu için konsolda bir hata alıyorum .

Yukarıdaki örnekte getPostbir Vuex alıcı olarak nasıl arayabilirim listFeaturedPosts?

Yanıtlar:



18

Geçiş getterserişimi, yerel ve isim alansız getters ikinci argüman olarak. İsim alanlı modüller için rootGetters( başka bir modülde tanımlanan alıcılara erişmek için 4. argüman olarak ) kullanmalısınız:

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

3
Bu, başka bir vuex modülünden alıcıya ihtiyaç duyan kişiler için yararlıdır. Sadece, argümanların işe yaraması için cevapta gösterilen özel sırada olması gerektiğini vurgulamak istedim.
LJH

13

Olmadan test ettim stateve çalışmadım. Bu yüzden stategereklidir.

bu çalışıyor:

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

bu işe yaramadı

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

1
Herhangi bir Vue sürümünde çalışmadığını eklemek isterim. Nesne tahrip etme, adlandırılmış bağımsız değişkenlerle karıştırılmamalıdır ('durum'u atlamak için orijinal önerideki yanıta bakın). Gerçekten öyle (durum, alıcılar)
Igor Zinken

2
İkinci örnekte, statenesneyi adlandırıyorsunuz gettersve asıl gettersnesne olacak ikinci argümanı yok sayıyorsunuz. gettersBu örnekte iç gözlem yapacak olsaydınız, bunun aslında sizin durum nesneniz olduğunu görürdünüz.
mraaroncruz

11

Getters , 2. argüman olarak diğer alıcıları alır

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

Resmi belgelere bağlantı: https://vuex.vuejs.org/guide/getters.html#property-style-access


2
Beğeniniz: a) açık bir kod örneği b) belgelerdeki uygun yere bağlantı
Katinka Hesselink

1
Bunun yerine böyle yazmak fark eder mi? getters: {doneTodos: state => {return state.todos.filter (todo => todo.done)}, doneTodosCount: (state, getters) => {return this.getters.doneTodos.length}}
Rivo

@Rivo bunu yapamayacağınızı bildiğim kadarıyla. Bunu denerseniz, şöyle bir hata alırsınız: [Vue warn]: Oluşturmada hata: "TypeError: Tanımsız 'alıcılar' özelliği okunamıyor"
OziOcb

-3

durumdan geçmek yerine, alıcıları geçin ve istediğiniz diğer alıcıları arayın. Umarım yardımcı olur.

Mağazanızda / getters.js

export default foo = (getters) => {
   return  getters.anyGetterYouWant
}

2
Bence Nesne yıkımını argümanlarla karıştırıyorsunuz. Fonksiyonun ilk argümanı durumdur, ikincisi alıcılar Nesnesidir. İlk argümanı 'alıcılar' olarak adlandırabilirsiniz, ancak bu yine de devlet olacaktır! Aradığınız: export default foo = (state, getters) => ...
Igor Zinken

Veyaexport default foo = ({ getters }) => { return getters.anyGetterYouWant }
GaryMcM
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.