Global State Management with Vue's Provide/Inject

Vue 3 introduced provide and inject as a mechanism for dependency injection, offering a way to share data across components without explicitly passing props down through multiple levels of the component tree. This challenge focuses on implementing a simple app-level state management solution using provide and inject to manage a user's authentication status. This is a common pattern for sharing authentication information throughout your application.

Problem Description

You need to create a Vue application that manages a user's authentication status (logged in or logged out) using provide and inject. The application should have a central component (App.vue) that provides the authentication state. Other components can then inject this state and react accordingly. The state should be mutable, allowing components to log the user in or out.

Key Requirements:

• App.vue (Provider): This component will be the root of your application and will provide an authStore object. authStore will have two properties: isLoggedIn (boolean, initially false) and a login function, and a logout function.
• authStore: This object should be provided using provide('auth', authStore).
• Injectable Store: Other components should be able to inject the authStore using inject('auth').
• Login/Logout Functionality: The login function should set isLoggedIn to true. The logout function should set isLoggedIn to false.
• Component Reactivity: Components that inject the authStore should re-render when isLoggedIn changes.

Expected Behavior:

1. Initially, all components that inject authStore should display a message indicating the user is logged out.
2. When the login function is called (e.g., from a button click), isLoggedIn should be set to true, and all components that inject authStore should update to display a message indicating the user is logged in.
3. When the logout function is called, isLoggedIn should be set to false, and all components that inject authStore should update to display the logged-out message.

Edge Cases to Consider:

• Ensure that the authStore is properly initialized and provided.
• Handle potential errors if the inject fails (though this is unlikely in a controlled environment).
• Consider how to manage the state if the application needs to persist the authentication status across page reloads (this is beyond the scope of this challenge, but a good consideration for real-world applications).

Examples

Example 1:

Input: App.vue provides authStore with isLoggedIn = false, and a component injects authStore.
Output: The injected component displays "Logged Out".
Explanation: The initial state is logged out, so the component reflects that.

Example 2:

Input: A button click calls authStore.login().
Output: The injected component displays "Logged In".
Explanation: The login function sets isLoggedIn to true, triggering a re-render.

Example 3:

Input: A button click calls authStore.logout().
Output: The injected component displays "Logged Out".
Explanation: The logout function sets isLoggedIn to false, triggering a re-render.

Constraints

• The solution must be implemented using Vue 3 and TypeScript.
• The solution must use provide and inject for app-level state management.
• The solution should be well-structured and easy to understand.
• The solution should be functional and meet all the requirements outlined in the problem description.
• No external state management libraries (e.g., Vuex, Pinia) are allowed. The goal is to demonstrate understanding of provide/inject.

Notes

• Think about how to structure your components to clearly separate the state management logic from the UI.
• Consider using a reactive object for authStore to ensure that changes are properly detected by injected components.
• This is a simplified example. In a real-world application, you would likely use a more robust state management solution. However, this exercise is designed to illustrate the basic principles of provide and inject.
• Focus on the core functionality of providing and injecting the authentication state. Styling and complex UI elements are not required.