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.