Передача функции в качестве опоры в Vue js для извлечения данных


Передача функции в качестве опоры в Vue js для извлечения данных

22.09.2020 01:04:29 Просмотров 32 Источник

У меня есть компонент, который я хотел бы отделить от реализации выборки данных. Так что я могу передать обратный вызов данных выборки в качестве опоры.

Я хотел бы сделать это так, чтобы я мог издеваться над выборкой данных в сборнике рассказов.

Request.js

export const endpoints = {
  fetchProducts: page => `https://some-end-point-here?page=${page}`
};

export const fetchProducts = async (page = 1, endpoint = endpoints.fetchProducts(1)) => {
  const response = await fetch(endpoint);
  return await response.json();
}; 

(сборник рассказов) Где используется компонент

import {fetchProducts} from "./request";
export const someCPM = ()=> ({
    components: {SomeCPM},
    props: {
        fetchProducts: {default: fetchProducts},
    },
    template: `<product-grid v-bind="$props"></product-grid>`
});

Тип опоры компонента

  fetchProducts: {
    type: Function,
    required: true
  }

Проблема в том, что меня постоянно предупреждают о неправильном типе реквизита. Это означает, что он получает обещание. Таким образом, не исполнение, как принести продукты-это не функция.

Даже если сделать fetchProducts, чтобы вернуть номер и удалить асинхронный характер, как это:

const fetchProducts = () => 9999

Тогда я получаю, что fetch product - это число, а не функция! Это означает, что даже если я передаю ссылку на функцию где-то, каким-то образом она выполняется.

У вопроса есть решение - Посмотреть?

Ответы - Передача функции в качестве опоры в Vue js для извлечения данных / Passing a function as a prop in Vue js to fetch data

Является ответом!
Nikola Mitic

22.09.2020 05:14:39

Мне пришлось использовать заводскую функцию, чтобы заставить его работать.

export const fetchProducts = () => async (page = 1, endpoint = endpoints.fetchProducts(1)) => {
  const response = await fetch(endpoint);
  return await response.json();
}; 
Помочь в развитии проекта:
Закрыть X