Vue Storefront核心模块如何扩展答案

【问题标题】：How to extend core modules of Vue StorefrontVue Storefront核心模块如何扩展
【发布时间】：2020-12-12 18:35:21
【问题描述】：

我想覆盖购物车模块存储中的操作。我正在尝试通过以下链接扩展此 CartModule Extending and Overriding Modules Doc

我用以下代码创建了一个文件/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 不匹配的错误

我也不知道下一步该怎么做才能使它有效。文档对此并不清楚。请帮忙。谢谢

【问题讨论】：

标签： javascript vue.js e-commerce magento2 vue-storefront

【解决方案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

...
..

【讨论】：