如何扩展Vue Storefront的核心模块

Question

我想覆盖来自购物车模块存储的操作。我正在尝试通过这个链接Extending and Overriding Modules Doc来扩展这个CartModule

我用以下代码创建了一个文件/src/modules/cart/index.ts

import { VueStorefrontModuleConfig, extendModule, VueStorefrontModule } from '@vue-storefront/core/lib/module'
import { CartModule } from '@vue-storefront/core/modules/cart'

import { cartModule } from './store'

const cartExtend: VueStorefrontModuleConfig = {
    key: 'cart',
    store: {modules: [{key: 'cart', module: cartModule}]},
    afterRegistration: function () {
        console.log('Cart module extended')
    }
}

extendModule(cartExtend)

export const registerModules: VueStorefrontModule[] = [CartModule]

我收到错误，CarModule类型与VueStorefrontModule不匹配

我也不知道下一步该怎么做才能让它变得有效。医生们对此并不清楚。请帮帮忙。谢谢

Answer 1

如果你想重写模块的操作，你不需要扩展模块，而是用存储。

这里的是示例：

Vuestorefront有CartModule (在核心中)，您需要更改动作代码refreshTotals。

在文件/src/modules/cart/index.ts中编写代码

import {StorefrontModule} from '@vue-storefront/core/lib/modules';
import {extendStore} from '@vue-storefront/core/helpers';

const cartModule = {
    action: {
        async refreshTotals({dispatch}, payload) {
            //
            // your new (and better!) code ;-)
            //
        }
    },
}

export const MyAwesomeCart: StorefrontModule = function () {
    extendStore('cart', cartModule);
}

在最后一步中，注册这个新模块：

..
...
import {CartModule} from '@vue-storefront/core/modules/cart';
import {MyAwesomeCart} from "modules/cart/index";

export function registerClientModules() {
    registerModule(CartModule); // original module 
    registerModule(MyAwesomeCart); // your new overwiritng module

...
..