Як мені зателефонувати до геттера з іншого геттера у 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.