I'm attempting to obtain a computed value using the composition API in vue, and here is the code I am working with:
setup() {
const store = useStore();
const spaUrls = inject<SpaUrls>('spaUrls');
const azureAd = inject<AzureAd>('azureAd');
const account: AuthenticationAccount = computed<AuthenticationAccount>(() => store.state.authentication.account);
watch(() => account, (newValue, oldValue) => {
if (oldValue.loading && !newValue.loading && !newValue.hasAccount) {
// no account so redirect to unauthenticated page
window.location.href = spaUrls.accessDenied;
}
});
store.dispatch('authentication/authenticate', azureAd);
},
However, it's encountering compilation errors as follows:
Type 'ComputedRef' is missing the following properties from type 'AuthenticationAccount': hasAccount, loading
If I change it to
const account = computed<AuthenticationAccount>(() => store.state.authentication.account);
It then fails with the following errors:
Property 'loading' does not exist on type 'ComputedRef'
Property 'hasAccount' does not exist on type 'ComputedRef'
How should I define the type for the account variable?