If I need to establish an empty value in my Pinia store to store the current subscription model the user is viewing, it should be null if the user is not on a subscription detail page.
Process: When the user clicks on a link to view subscription details for ID 1, I will trigger an action in the store to fetch the details for subscription ID 1 and assign the object returned by the endpoint to the reactive variable.
export const useSubscriptionStore = defineStore("subscriptions", () => {
let currentSubscription: Ref<SubscriptionModel> = reactive(null); // Need to handle both cases!
async function loadSubscription(subscriptionId) {
const { $api } = useNuxtApp();
const { data } = await useAsyncData(() =>
$api.subscriptions.getSubscription(subscriptionId),
);
currentSubscription.value = data.value;
}
return {
loadSubscription,
};
});
Should I set the reactive variable declared in line 2 to match the object structure expected from the backend? Is it possible to have a reactive variable that can hold either null or an object?
In Vue 2, we could utilize Vue.set()