Magento 2 - Can not get the customer data from customer-data.js file in Magento 2.3.6 p1

Question

I'm using Magento 2.3.6 p1. And I want to observe the customers when they logged in. I used this in my Js file but it returned undefined when I console.log the first name value. It happened both when customers logged in and logged out.

define([
 "jquery", "Magento_Customer/js/customer-data"
], function(,ドル customerData) {
 "use strict";
 return function (config, element) {
 var firstname = customerData.get('customer')().firstname;
 console.log(firstname);
 };
});

I have no ideas why this happened. Because I can get the customer data in this way in the older version. Have Magento changed the way to do this, I'm confused.

Answer 1

You can get firstname using below code:

define([
 'uiComponent',
 'Magento_Customer/js/customer-data',
 'Magento_Customer/js/view/customer'
], function (Component, customerData) {
 'use strict';
 return Component.extend({
 /** @inheritdoc */
 initialize: function () {
 this._super();
 this.customer = customerData.get('customer');
 },
 /**
 * @return {*}
 */
 firstname: function() { 
 var customerInfo = customerData.get('customer')();
 var customerFirstname = customerInfo.firstname;
 return customerFirstname
 } 
 });
});

Then call firstname where you want to use it