How to Use Js Mixin in Magento 2?

In your Routine coding drills, you must often override the javascript file to achieve the requirement. In Magento 2 js mixin is useful to extend or modify existing js functions.
In this article, I am going to explain to you what is js mixin and the use of js mixin in Magento 2.

What is Mixins?

According to adobe commerce guide Mixin is a class whose methods are added to, or mixed in, with another class. A base class includes the methods from a mixin instead of inheriting from it. This allows you to add to or augment the behavior of the base class by adding different mixins to it.

A Js mixin is a way to extend or modify the behavior of JavaScript components without overriding them completely. Mixins allow you to inject custom code into existing JavaScript components, providing a flexible and modular approach to modifying functionality.
In this article, I just tried to append some data to the shipping address.

How to Use Js Mixin in Magento 2:

To use mixin in Magento 2 please follow the below steps.
Step 1: Create requirejs-config.js at app/code/Vendor/Module/view/frontend and paste the below code. You need to change the code as per your requirements.

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                'Vendor_CustomModule/js/action/set-shipping-information-mixin': true
            }
        }
    }
};

In the above code I have extended Magento_Checkout/js/action/set-shipping-information core js component in my custom module. You can extend any core-js component as per your requirements.

Step 2: Create a set-shipping-information-mixin.js file at app/code/Vendor/CustomModule/view/frontend/web/js/action to extend the original function.

define([
     'jquery',
     'mage/utils/wrapper',
     'Magento_Checkout/js/model/quote'
 ], function ($, wrapper, quote) {
     'use strict';

     return function (setShippingInformationAction) {

         return wrapper.wrap(setShippingInformationAction, function (originalAction) {
             var shippingAddress = quote.shippingAddress();
             if (shippingAddress['customAttributes'] === undefined) {
                 shippingAddress['customAttributes']= {}
             }
             shippingAddress['customAttributes']['additional_data'] = "Custom Value";
             //console.log(quote.shippingAddress());
             return originalAction();
         });
     };
 });

In this code, I have appended extra information along with shipping information without overriding the whole js function or js file.

Now open your terminal or any command line tool and go to the root of the Magento then execute the below commands:

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c

After performing these steps, if you shceck the console log quote.shippingAddress() in js then you will see additional_data is appended under the customAttributes with Custom Value.

I hope this article helped you to know How to Use Js Mixin in Magento 2. Kindly comment below if you have any other questions or doubts.