Mastering TypeScript/

...

/

Updating the Vue Application

Updating the Vue Application

Learn how to update a Vue application to send and receive messages via the Event Bus.

We'll cover the following...

We can now turn our attention to our Vue application, which will have similar changes made to it to send and receive messages via the Event Bus. We will also need to integrate with our API. A list of changes to our Vue application are as follows:

  • Listen for the 'user-logged-in' event and store the username
  • Fetch the shopping cart from the API via the /carts/{username} endpoint
  • Listen for the 'add-user-cart-item' event, and add the item to the current shopping cart
  • Add a new button called 'Update Cart' that will call the API to store the shopping cart
  • Send a 'checking-out' event to the Event Bus
  • Send a 'continue-shopping' event to the Event Bus
  • Send a 'place-order' event to the Event Bus

Vue domain events

Let’s start our updates to the Vue application by firstly copying the micro-eventbus/dist/MicroEventBus.js file into the shopping-cart/public directory and then updating the shopping-cart/public/index.html file for testing:

Press + to interact
// Existing HTML
<script type="text/javascript" src="MicroEventBus.js">
</script>
</head>
<body>
    // Existing HTML
    <script>
        testBroadcast();
        function testBroadcast() {
            window.microEventBus.on('continue-shopping')
                .subscribe(function (event) 
            {
                console.log('IDX : continue-shopping : ' + event)
            });
            window.microEventBus.on('place-order')
                .subscribe(function (event) 
            {
                console.log('IDX : place-order : ' + event)
            });
        }
        function sendUserLogin() {
            window.microEventBus
                .broadcast('user-logged-in', 'test_user_1');
        }
        function sendAddToCart() {
            window.microEventBus
                .broadcast('add-user-cart-item',
                    {
                        username: "test_user_1",
                        productId: 3,
                        amount: 303
                    });
        }
    </script>
    <button onclick="sendUserLogin()">
        Send 'user-login'</button>
    <button onclick="sendAddToCart()">
        Send 'add-user-cart-item'</button>
</body>

Here, we have made three changes to the file in a very similar manner to the changes we made to our React product-list/public/index.html file for testing:

  • Firstly, we have included the MicroEventBus.js file as a resource.

  • Secondly, we are subscribing to the 'continue-shopping' and 'place-order' events, which are raised by our Vue application.

  • Thirdly, we have hooked up a test button to send the 'user-logged-in' event, and another button to send the 'add-user-cart-item' event.

Fetching data in Vue

Let’s now look at the updates that we need within our Vue ...