useUserAddresses()
The useUserAddresses()
composable allows for:
- loading user addresses
- creating user addresses
- updating user addresses
- deleting user addresses
Important!
This composable works only for authenticated users.
addresses
Main data object populated by the load()
method.
Type
const addresses: ComputedProperty<Address[];
References: Address
Example
import { useUserAddresses } from '@vsf-enterprise/sapcc';
export default {
setup() {
const { addresses } = useUserAddresses();
return { addresses };
}
};
loading
Indicates whether any of the composable methods is in progress.
Type
const loading: ComputedProperty<UseUserAddressesLoading>;
References: UseUserAddressesLoading
error
Contains errors thrown by any of the composable methods.
Type
const error: ComputedProperty<UseUserAddressesError>;
References: UseUserAddressesError
load()
Fetches user addresses from the API and saves the fetched object in the addresses property. Under the hood, it sends requests to the getAllConsents API endpoint.
Type
interface LoadUserAddressesProps {
fields?: 'BASIC' | 'DEFAULT' | 'FULL' | string | string[];
}
async function load: (props?: LoadUserAddressesProps): Promise<void>;
References: LoadUserAddressesProps
Basic Example
import { onMounted } from '@nuxtjs/composition-api';
import { useUserAddresses } from '@vsf-enterprise/sapcc';
export default {
setup() {
const { load } = useUserAddresses();
onMounted(async () => {
await load();
});
}
};
Custom response fields example
import { onMounted } from '@nuxtjs/composition-api';
import { useUserAddresses } from '@vsf-enterprise/sapcc';
export default {
setup() {
const { load } = useUserAddresses();
onMounted(async () => {
await search({
fields: 'addresses(firstName)'
});
});
}
};
addAddress()
Creates a new user address and updates the addresses property. Under the hood, it sends requests to the createAddress API endpoint.
Type
interface AddUserAddressProps {
fields?: 'BASIC' | 'DEFAULT' | 'FULL' | string | string[];
address: Address
}
async function addAddress: (props: AddUserAddressProps): Promise<void>;
References: AddUserAddressProps, Address
Example
import { useUserAddresses } from '@vsf-enterprise/sapcc';
export default {
setup() {
const { addAddress } = useUserAddresses();
const saveAddress = async () => {
await addAddress({
address: {
titleCode: 'Mr',
firstName: 'John',
lastName: 'Doe',
line1: 'Example Street',
postalCode: '03-316',
town: 'San Francisco'
}
});
};
return { saveAddress };
}
};
updateAddress()
Overwrites specified fields of the existing user address and updates the addresses property. Under the hood, it sends requests to the updateAddress API endpoint.
Type
interface UpdateUserAddressProps {
address: Partial<Address> & Required<Pick<Address, 'id' >>
}
async function updateAddress: (props: UpdateUserAddressProps): Promise<void>;
References: UpdateUserAddressProps
Example
import { useUserAddresses } from '@vsf-enterprise/sapcc';
export default {
setup() {
const { updateAddress } = useUserAddresses();
const updateUserAddress = () => {
updateAddress({
address: {
id: '1',
firstName: 'Adam',
}
});
};
return { updateUserAddress };
}
};
deleteAddress()
Deletes the existing user address and updates the addresses property. Under the hood, it sends requests to the deleteAddress API endpoint.
Type
interface DeleteUserAddressProps {
addressId: string
}
async function deleteAddress: (props: DeleteUserAddressProps): Promise<void>;
References: DeleteUserAddressProps
Example
<template>
<!-- Template simplified for brevity -->
<div v-for="address in addresses">
<button @click="deleteAddress({ addressId: address.id })">
Delete
</button>
</div>
</template>
<script>
export default {
setup() {
const { addresses, deleteAddress } = useUserAddresses();
return { addresses, deleteAddress };
}
};
</script>
setDefaultAddress()
A syntactic sugar method for setting user address as default. Calls updateAddress with address: { id: props.addressId, defaultAddress: true }
under the hood.
Type
interface SetDefaultUserAddressProps {
addressId: string
}
async function setDefaultAddress: (props: SetDefaultUserAddressProps): Promise<void>
Example
<template>
<!-- Template simplified for brevity -->
<div v-for="address in addresses">
<button @click="setDefaultAddress({ addressId: address.id })">
Set as default
</button>
</div>
</template>
<script>
export default {
setup() {
const { addresses, setDefaultAddress } = useUserAddresses();
return { addresses, setDefaultAddress };
}
};
</script>
Good to know
Since this method is just a syntactic sugar for upadateAddress
, it has no dedicated loading indicator. If your goal is to prevent displaying some parts of the template until its execution is over, you can simply leverage the loading.updateAddress property.