ฉันจะเรียก getter จาก getter คนอื่นใน Vuex ได้อย่างไร?


113

พิจารณาง่าย Vue บล็อก:
ฉันใช้ Vuex เป็นเก็บข้อมูลของฉันและฉันต้องตั้งค่าสองgettersgetPostทะเยอทะยานสำหรับการเรียกpostตามรหัส, เช่นเดียวกับlistFeaturedPostsที่ผลตอบแทนไม่กี่ตัวอักษรแรกของแต่ละโพสต์ที่โดดเด่น สคีมาพื้นที่เก็บข้อมูลสำหรับรายการโพสต์ที่แนะนำอ้างอิงโพสต์ตามรหัสของพวกเขา รหัสเหล่านี้ต้องได้รับการแก้ไขเป็นโพสต์จริงเพื่อจุดประสงค์ในการแสดงข้อความที่ตัดตอนมา

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 อื่น ๆ อย่างไรก็ตามเมื่อฉันพยายามเข้าถึงgettersจากภายในlistFeaturedPostsมันว่างเปล่าและฉันได้รับข้อผิดพลาดในคอนโซลเนื่องจากgetters.getPostไม่ได้กำหนดไว้ในบริบทนั้น

ฉันจะเรียกgetPostเป็น Vuex getter จากภายในlistFeaturedPostsในตัวอย่างด้านบนได้อย่างไร

คำตอบ:


186

ใน VueJS 2.0 คุณต้องผ่านทั้งสองstateและgetters.

Getters จะถูกส่งต่อไปยัง getters อื่น ๆ เป็นอาร์กิวเมนต์ที่ 2 :

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

เอกสารอย่างเป็นทางการ: https://vuex.vuejs.org/guide/getters.html#property-style-access


20

ส่งผ่านgettersเป็นอาร์กิวเมนต์ที่สองเพื่อเข้าถึง getters แบบโลคัลและแบบไม่ระบุชื่อ สำหรับโมดูลเนมสเปซคุณควรใช้rootGetters(เป็นอาร์กิวเมนต์ที่4เพื่อเข้าถึง getters ที่กำหนดไว้ภายในโมดูลอื่น):

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

4
สิ่งนี้มีประโยชน์สำหรับผู้ที่ต้องการ getter จากโมดูล vuex อื่น ฉันแค่อยากจะเน้นว่าอาร์กิวเมนต์ต้องอยู่ในลำดับเฉพาะที่แสดงในคำตอบโดยไม่มีอาร์กิวเมนต์ใด ๆ ที่ถูกละเว้นเพื่อให้สามารถทำงานได้
LJH

14

ฉันทดสอบโดยไม่มีstateและไม่ได้ผล นั่นเป็นเหตุผลว่าทำไมstateจำเป็น

งานนี้:

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

ไม่ได้ผล

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

1
ฉันต้องการเพิ่มว่ามันใช้ไม่ได้กับ Vue เวอร์ชันใด ๆ การทำลายออบเจ็กต์ไม่ควรสับสนกับอาร์กิวเมนต์ที่มีชื่อ (ดูคำตอบในข้อเสนอแนะดั้งเดิมเพื่อละเว้น 'สถานะ') มันเป็นจริง (รัฐรับ)
Igor Zinken

2
ในตัวอย่างที่สองคุณกำลังตั้งชื่อstateวัตถุgettersและละเว้นอาร์กิวเมนต์ที่สองซึ่งจะเป็นgettersวัตถุจริง หากคุณจะใคร่ครวญgettersในตัวอย่างนี้คุณจะเห็นว่ามันเป็นวัตถุสถานะของคุณ
mraaroncruz

12

Getters ได้รับ getters อื่นเป็นอาร์กิวเมนต์ที่ 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
ยกนิ้วให้: a) ตัวอย่างโค้ดที่ชัดเจน b) ลิงก์ไปยังตำแหน่งที่เหมาะสมในเอกสาร
Katinka Hesselink

1
มันแตกต่างกันไหมที่จะเขียนแบบนี้แทน? getters: {doneTodos: state => {return state.todos.filter (todo => todo.done)}, doneTodosCount: (state, getters) => {return this.getters.doneTodos.length}}
Rivo

@Rivo เท่าที่ฉันรู้ว่าคุณทำอย่างนั้นไม่ได้ หากคุณลองคุณจะได้รับข้อผิดพลาดดังนี้: [Vue warn]: Error in render: "TypeError: Cannot read property 'getters' of undefined"
OziOcb

-3

แทนที่จะผ่านสถานะให้ส่งgettersแล้วโทรหา getter อื่น ๆ ที่คุณต้องการ หวังว่าจะช่วยได้

ในร้านค้าของคุณ / getters.js

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

2
ฉันคิดว่าคุณกำลังสับสนในการทำลาย Object ด้วยข้อโต้แย้ง อาร์กิวเมนต์แรกของฟังก์ชันคือสถานะที่สองคือ getters Object คุณสามารถตั้งชื่ออาร์กิวเมนต์แรกว่า 'getters' แต่จะยังคงเป็นสถานะ! คุณกำลังมองหา: export default foo = (state, getters) => ...
Igor Zinken

หรือexport default foo = ({ getters }) => { return getters.anyGetterYouWant }
GaryMcM
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.