# User profile
# Loading current user
To access data of the currently logged-in user, we can use another property of useUser
called simply user
.
import { useUser } from '{INTEGRATION}';
import { onSSR } from '@vue-storefront/core';
export default {
setup () {
const {
load,
user
} = useUser();
onSSR(async () => {
await load();
});
return {
user
};
}
}
user
property will return null
if the user is not logged-in. userGetters
should handle such cases and return empty data like ''
, []
etc. depending on the expected return data type. To prevent empty elements in the template, it's a good practice to check if the user is logged-in before using getters.
<template>
...
<p v-if="isAuthenticated">
{{ userGetters.getFullName(user) }}
</p>
...
</template>
<script>
import { useUser, userGetters } from '{INTEGRATION}';
import { onSSR } from '@vue-storefront/core';
export default {
setup () {
const {
load,
user,
isAuthenticated
} = useUser();
onSSR(async () => {
await load();
});
return {
load,
user,
isAuthenticated,
userGetters
};
}
}
</script>
# Updating user credentials
Updating user data (except for the current password, which is described in the Changing password section) can be done using updateUser
method in useUser
composable.
import { useUser } from '{INTEGRATION}';
export default {
setup () {
const { error, updateUser } = useUser();
const onSubmit = async (formData) => {
await updateUser({ user: formData });
// "error.value.updateUser" should be empty if request was successful
};
return {
onSubmit
};
}
}
# Changing password
Updating user password can be done using changePassword
method in useUser
composable. It requires the current and new password, to confirm user identity.
import { useUser } from '{INTEGRATION}';
export default {
setup () {
const { error, changePassword } = useUser();
const onSubmit = async (formData) => {
await changePassword({
current: formData.currentPassword,
new: formData.newPassword
});
// "error.value.changePassword" should be empty if request was successful
};
return {
onSubmit
};
}
}
# Managing addresses (billing and shipping)
Managing billing and shipping addresses is done using useUserBilling and useUserShipping composables.
Both have almost identical signature (properties, methods and getters), so examples below will only show usage of useUserBilling
.
# Displaying a list of addresses
To get a list of addresses, use load
and billing
or shipping
properties and getAddresses
method on corresponding getter.
<template>
...
<div
v-for="address in userBillingGetters.getAddresses(billing)"
:key="userBillingGetters.getId(address)"
>
{{ userBillingGetters.getPostCode(address) }}
</div>
...
</template>
<script>
import { useUserBilling, userBillingGetters } from '{INTEGRATION}';
import { onSSR } from '@vue-storefront/core';
export default {
setup () {
const {
billing,
load
} = useUserBilling();
onSSR(async () => {
await load();
});
return {
billing,
userBillingGetters
};
}
}
</script>
# Adding, updating, and deleting addresses
useUserBilling
and useUserShipping
composables expose number of methods to manage addresses:
addAddress
deleteAddress
updateAddress
setDefault
Below is the example of using deleteAddress
method.
<template>
...
<div
v-for="address in userBillingGetters.getAddresses(billing)"
:key="userBillingGetters.getId(address)"
>
<button @click="deleteAddress({ address })">
Delete address
</button>
</div>
...
</template>
<script>
import { useUserBilling, userBillingGetters } from '{INTEGRATION}';
import { onSSR } from '@vue-storefront/core';
export default {
setup () {
const {
billing,
load,
deleteAddress
} = useUserBilling();
onSSR(async () => {
await load();
});
return {
billing,
deleteAddress,
userBillingGetters
};
}
}
</script>
For more information, please refer to documentation for useUserBilling and useUserShipping composables.
# Displaying user orders
To get a list of orders, use search
and orders
properties and getItems
method on orderGetters
.
<template>
...
<div
v-for="order in orderGetters.getItems(orders)"
:key="orderGetters.getId(order)"
>
{{ orderGetters.getStatus(order) }}
</div>
...
</template>
<script>
import { useUserOrders, orderGetters } from '{INTEGRATION}';
import { onSSR } from '@vue-storefront/core';
export default {
setup () {
const {
orders,
search
} = useUserOrders();
onSSR(async () => {
await search();
});
return {
orders,
orderGetters
};
}
}
</script>
For more information, please refer to documentation for useUserOrders composable.
# Protecting user profile routes
If there is a page that should be accessible only to logged-in users, such as user profile, you can use is-authenticated
middleware in the page-level component:
export default {
middleware: [
'is-authenticated'
]
}