Vue storefront:如何覆盖帮助器内部的函数？

Question

我需要修改vuestorefront/core/modules/catalog/helpers/search.ts下的'preConfigureProduct‘函数

https://github.com/vuestorefront/vue-storefront/blob/hotfix/v1.12.3/core/modules/catalog/helpers/search.ts#L51

我需要根据我的客户需求进行定制。因此，我需要在我的项目中覆盖这个函数。但是没有关于如何重写helper中的一个函数的文档。我也是vue storefront的新手，所以我不能完全理解模块扩展或混入。

提前谢谢。

Answer 1

我已经想好了，我也会给谁留下一个简短的答案。另外，我不确定这是不是一种好的做法，如果你知道更好的方法，请把它留在这里。

据我所知，如果你需要覆盖helper中的一个函数，你还需要“覆盖”调用你的helper函数的函数。

在我的例子中，我需要重写模块目录助手中的函数preConfigureProduct。

这个名为preConfigureProduct的函数是模块configureProducts -next中的一个asyc函数https://github.com/vuestorefront/vue-storefront/blob/hotfix/v1.12.3/core/modules/catalog-next/store/category/deprecatedActions.ts#L22。(我知道这是deprecatedActions。我的下一项工作是弄清楚如何切换到新的。)

因此，我扩展了模块catalog-next，从字面上复制粘贴configureProducts(因为我不需要修改它)，但是将preConfigureProduct导入到我的新文件中。

import { preConfigureProduct } from './helpers/search'

我的新search.ts文件：

import Vue from 'vue';
import config from 'config';

export const preConfigureProduct = ({ product, populateRequestCacheTags }) => {
    .....
  return product;
};

就是这样！

希望它能帮助其他人。如果有任何错误，欢迎指出。