Як мені зателефонувати до геттера з іншого геттера у Vuex?


106

Розглянемо простий блог Vue:
я використовую Vuex як свій сховище даних, і мені потрібно встановити два геттери : getPostгеттер для отримання 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зсередини listFeaturedPosts, він порожній, і я отримую помилку в консолі через getters.getPostневизначеність у цьому контексті.

Як мені зателефонувати getPostяк отримувач Vuex зсередини listFeaturedPostsу прикладі вище?

Відповіді:



18

Передайте gettersяк другий аргумент для доступу до локальних і непростірних імен. Для модулів із простором імен слід використовувати rootGetters(як 4-й аргумент для доступу до геттерів, визначених в іншому модулі):

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

3
Це корисно для людей, яким потрібен геттер з іншого модуля vuex. Я просто хотів наголосити, що для того, щоб це могло спрацювати, аргументи мають бути в конкретному порядку, показаному у відповіді, без аргументів.
— LJH

13

Я тестував без stateі не працював. Ось чому stateце необхідно.

це працює:

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

це не спрацювало

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

1
Я хотів би додати, що це не працює в жодній версії Vue. Деструктуризацію об’єктів не слід плутати з іменованими аргументами (див. Відповідь в оригінальній пропозиції, щоб опустити „стан“). Це справді (штат, геттери)
— Ігор Зінкен,

2
У другому прикладі ви називаєте stateоб'єкт gettersі ігноруєте другий аргумент, який був би фактичним gettersоб'єктом. Якби ви проаналізували gettersцей приклад, то побачили б, що це насправді ваш об’єкт стану.
— mraaroncruz

11

Геттери отримують інші геттери як 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
Великі пальці вгору для: а) чіткого прикладу коду б) посилання на належне місце в документах
— Катінка Хесселінк

1
Чи різнице писати замість цього? getters: {doneTodos: state => {return state.todos.filter (todo => todo.done)}, doneTodosCount: (state, getters) => {return this.getters.doneTodos.length}}
— Rivo

@Rivo, наскільки я знаю, ви не можете цього зробити. Якщо ви спробуєте, ви отримаєте таку помилку: [Vue попереджає]: Помилка у візуалізації: "TypeError: Не вдається прочитати властивість 'getters' з undefined"
— OziOcb,

-3

замість передачі стану передайте геттери, а потім зателефонуйте будь-якому іншому геттеру, який ви хочете. Сподіваюся, це допоможе.

У вашому магазині / getters.js

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

2
Я думаю, ви плутаєте деструктурування об’єктів з аргументами. Перший аргумент функції - це стан, другий - об'єкт отримання. Ви можете назвати перший аргумент "здобувачами", але це все одно буде держава! Ви шукаєте: експортувати за замовчуванням foo = (state, getters) => ...
— Ігор Зінкен

Абоexport default foo = ({ getters }) => { return getters.anyGetterYouWant }
— GaryMcM
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.