User data

Basic user data

When a user is authenticated, basic user data (e.g. email and name) can be accessed through the user property of useUser composable. If there is no authenticated user, the user property has value of null.

<script>
import { useUser } from '@/composables';
import { onSSR } from '@vue-storefront/core';

export default {
  setup() {
    const {
      load,
      user
    } = useUser();

    onSSR(async () => {
      await load();
    });

    return {
      user
    };
  }
};
</script>

The load function from the useUser composable in the above example performs a load of user data from a cookie stored in a user's browser. The user property has a null value if the cookie is not present.

The user object contains the following properties:

{
  id: string;
  email: string;
  name: string;
  accepts_marketing: boolean;
  authentication_mechanism: string;
  password: boolean;
  secret_key: string;
  type: "customer";
}

useUserData composable

In addition to useUser, Vue Storefront provides developers with the useUserData helper composable to streamline specific data retrieval, such as first name and last name out of a name value provided by the user object.

<template>
  ...
  <p v-if="isAuthenticated">
    First name: {{ firstName }}
    Last name: {{ lastName }}
  </p>
  ...
</template>

<script>
import { useUser, useUserData } from '@/composables';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const {
      load,
      isAuthenticated,
      user
    } = useUser();

    const { getFirstName, getLastName } = useUserData();

    onSSR(async () => {
      await load();
    });

    const firstName = getFirstName(user);
    const lastName = getLastName(user);

    return {
      isAuthenticated,
      firstName,
      lastName
    };
  }
};
</script>

Managing addresses data

Managing billing and shipping addresses is done using useUserBilling (opens new window) and useUserShipping (opens new window) composables.

Both composables have an almost identical signature, with the only difference of the actual address data property name, which is billing in useUserBilling and shipping in useUserShipping accordingly.

{
  /* property containing data */
  billing, 
    
  /* functions */
  load,
  addAddress,
  deleteAddress,
  updateAddress,
    
  /* error and loading states */
  error,
  loading
}

Displaying a list of addresses

To get a list of addresses, use load and billing or shipping properties accordingly. Both properties contain an array of user-specific addresses, hence the need for iteration on the returned values.

<template>
  ...
  <div
    v-for="address in billing"
    :key="address.id"
  >
    <!-- display address data here -->
  </div>
  ...
</template>

<script>
import { useUserBilling } from '@/composables';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const {
      billing,
      load
    } = useUserBilling();

    onSSR(async () => {
      await load();
    });

    return {
      billing
    };
  }
};
</script>

Adding, updating, removing the addresses

As presented above, useUserBilling and useUserShipping composables expose a few methods you can use to manage addresses:

• addAddress
• deleteAddress
• updateAddress

The below example shows a usage of addAddress to add a user's billing address.

<template>
  <form @submit.prevent="addAddress({ address: form })">
    <!-- form fields -->
    <button type="submit" :disabled="loading">Submit</button>
  </form>
</template>

<script>
import { ref } from '@nuxtjs/composition-api';
import { useUserBilling } from '@/composables';

export default {
  setup () {
    const { 
      addAddress, 
      loading 
    } = useUserBilling();
    
    const form = ref({
      name: '',
      firstName: '',
      lastName: '',
      line1: '',
      line2: '',
      city: '',
      county: '',
      postcode: '',
      country: '',
      phoneNumber: ''
    });

    return {
      addAddress,
      loading,
      form
    };
  }
};
</script>

For more information, please refer to documentation for useUserBilling (opens new window) and useUserShipping (opens new window) composables.

useUserAddressData composable

In addition to the above composables, VSF provides developers with the useUserAddressData helper composable to simplify data retrieval from the address object (either billing or shipping, depending on the composable used).

The below example presents loading lists of billing and shipping addresses and retrieves city field of the first address on each list with useUserAddressData's getCity method.

<script>
import { useUserBilling, useUserShipping, useUserAddressData } from '@/composables';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const {
      billing,
      load: loadBilling
    } = useUserBilling();

    const {
      shipping,
      load: loadShipping
    } = useUserShipping();

    const { 
      getCity 
    } = useUserAddressData();

    onSSR(async () => {
      await loadBilling();
      await loadShipping();
    });

    const billingCity = getCity(billing[0]);
    const shippingCity = getCity(shipping[0]);

    return {
      billingCity,
      shippingCity
    };
  }
};
</script>