时间戳

首页 > 解决方案 > Vue Storefront核心模块如何扩展

javascript - Vue Storefront核心模块如何扩展

问题描述

我想覆盖购物车模块存储中的操作。我正在尝试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

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

标签： javascriptvue.jse-commercemagento2vue-storefront

解决方案

如果您想覆盖模块的操作，您不想扩展模块而是存储。

这是示例：

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

...
..

推荐阅读