vuex-practice.md

Visit Counter for the Article Abstract Page

Objective

Implement a visit counter in a Vue2 application using Vuex and Vuetify on the page src/pages/Article/ArticleAbstractPage.vue. This setup includes error handling, a conditional reset mechanism, and a switch for controlling increment functionality, integrated with a managed loading state.

Requirements

1. Vuex State Management:

   • State Components:
     • visitCount: Stores the current number of page visits.
     • isLoading: Indicates ongoing data fetching or processing operations (true during API calls).
     • error: Holds error messages if fetch fails.
     • lastRefreshed: Records the timestamp when the counter was last reset.
     • isLocked: Indicates if the counter's increment functionality is disabled (false by default).
   • Mutations:
     • Adjust and reset the visit count.
     • Toggle the isLoading state.
     • Toggle the isLocked state.
     • Set and clear error messages.
     • Update the lastRefreshed timestamp.
   • Actions:
     • fetchInitialCount: Initiates fetching the initial count with a 20% chance of encountering an error. Toggles isLoading on at the start and off upon completion.
     • resetCounter: Resets the counter to zero 6 seconds after an error is detected, clears the error, and updates lastRefreshed.
     • initializeCounter: Manages the initial fetch, sets up error handling, and schedules the reset, ensuring it persists even if the user navigates away and returns.
   • Getters:
     • canLock: Returns true if the isLoading state is false and there is no error.
     • displayStatus: Returns a message indicating the current state of the app (loading, error, or current visit count).
       • Example values:
         • "Loading..." (if isLoading is true)
         • "Error: [error message]" (if there is an error)
         • "Current visit count: [visitCount]" (otherwise)
     • refreshStatus: Returns a string "Last reset date: " followed by the date as string.

2. Error Handling and Conditional Reset:

   • Simulate a 20% chance of an error during the initial fetch.
   • If an error occurs, display it, disable the switch, and automatically schedule a reset of the counter after 6 seconds.
   • Ensure the reset occurs 6 seconds after the error, even if the user navigates away from the page and returns.
   • After the reset, clear the error, set the counter to zero, and update lastRefreshed.

3. Vue Component Integration with Vuetify (src/pages/Article/ArticleAbstractPage.vue):

   • Vuetify Switch: Used to toggle the isLocked state. The switch has a label indicating its status ("Locked: true" or "Locked: false") and is disabled if there is an error or isLoading is true. https://v2.vuetifyjs.com/en/components/switches/
   • Text Display: Display the lastRefreshed timestamp, any current error message, and a loading indicator if isLoading is true, all below the switch.

4. UI Behavior and Flow:

   • On Initial Load: The application attempts to fetch the initial visit count from the API https://randomuser.me/api/?results=1, showing a loading indicator. The initial number for the counter will be in the path location.street.number from the response.
   • If Error Occurs: The error is displayed, the switch is disabled, and a reset is scheduled.
   • Post-Error Reset: Clears the error, resets the counter, updates lastRefreshed, and re-enables the switch.
   • Switch Interaction: Users can toggle the switch to lock/unlock the counter increment functionality when enabled and not loading. The label on the switch updates according to its state.
   • Feedback Display: Continuously provide updates about the last reset, any current errors, and the loading state below the switch.

Example Template

<template>
  ...
    <div>
      <v-switch "..."></v-switch>
      <p>{{ displayStatus }}</p>
      <p>{{ refreshStatus }}</p>
      <ArticleAbstract />
    </div>
  ...
</template>