Javascript 在Vue js中将函数作为道具传递以获取数据

我有一个组件，我希望与抓取数据实现分离。这样我就可以将获取数据回调作为道具传递

我想这样做，这样我就可以在故事书中模拟获取数据

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返回数字并删除异步性质，如下所示：

const fetchProducts = () => 9999

我得到的结果是，fetch产品是一个数字，而不是一个函数！

---

这意味着，即使我将引用传递到某个函数的某个地方，该函数也会以某种方式执行。

我必须使用工厂函数使其工作

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

---

您还没有展示（我不认为）如何在道具中传递函数。。e、 g.

@JaromandaX我做过，你们可以在故事书中看到。使用v-bind=“$props”，如果我直接将prop作为：fetchproducts传递，也会发生同样的情况。我认为vue看到该prop是一个函数，所以执行它。。。如果函数是一个返回函数的函数<代码>（）=>（）=>{code here}？或<代码>：fetchProps=“this.fetchProps”-基于@JaromandaX yes！使工厂功能正常工作。但是我不喜欢：）有没有办法不那样做呢fetchProps=“this.fetchProps”由于某些原因，此操作不起作用。。。

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