How to extend core modules of Vue Storefront

Question

I want to override an action from cart module store. I am trying to extend this CartModule by following this link Extending and Overriding Modules Doc

I have created a file /src/modules/cart/index.ts with following code

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]

I am getting error that CarModule type does not match with VueStorefrontModule

Also I don't know what to do next in order to make it effective. Docs are not clear about it. Please help. Thanks

Answer 1

If you want to overwrite action of module you don't want to extend module but store.

---

Here is example:

Vuestorefront has CartModule (in core) and you need to change code of action refreshTotals.

Code your in file /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);
}

In last step register this your new module under /src/modules/client.ts:

..
...
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

...
..