pinia sate

[clear panther]

why it still showing the auth menu item even i already logout?

the isloggedin ans isguest are the getter from a pinia store

<el-dropdown-menu>
<template v-if="isLoggedIn || !isGuest">
<el-dropdown-item @click="navigateTo('/account/myProfile')"
>My Profile</el-dropdown-item
>
<el-dropdown-item @click="navigateTo('/account/paymentMethods')"
>Payment Methods</el-dropdown-item
>
<el-dropdown-item @click="navigateTo('/account/savedAddresses')"
>Saved Addresses</el-dropdown-item
>
<el-dropdown-item @click="navigateTo('/orders')"
>Orders</el-dropdown-item
>
<el-dropdown-item @click="navigateTo('/products/favourites')"
>Favourite</el-dropdown-item
>
<el-dropdown-item @click="logout">Logout</el-dropdown-item>
</template>

          <el-dropdown-item @click="navigateTo('/login')" v-else
            >Login</el-dropdown-item
          >
        </el-dropdown-menu>

[echo mortar]

Hi @clear panther. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Your v-if condition is the likely problem:

<template v-if="isLoggedIn || !isGuest">

If your isGuest getter is still false after logout, then !isGuest is true, so the auth menu keeps showing even when isLoggedIn is false.

To fix it, make sure your logout action in the Pinia store correctly resets both states used by the getters (e.g. user, token, role, etc.), so that after logout:

• isLoggedIn === false
• isGuest === true (or whatever your logic expects)

Then this condition will correctly fall through to the v-else (Login item):

<template v-if="isLoggedIn && !isGuest">
  <!-- authenticated menu -->
</template>
<el-dropdown-item @click="navigateTo('/login')" v-else>
  Login
</el-dropdown-item>

The knowledge sources only show general Pinia usage (state, getters, actions) and not your specific store implementation, so I can’t be more precise about how your isLoggedIn / isGuest getters are computed. The key is: verify in the store that those getters actually change after logout, and adjust the condition (|| vs &&) to match your intended logic.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@clear panther Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[clear panther]

@echo mortar i already check the value of the getters, both are correct, it just still showing

[echo mortar]

Let me check the knowledge base for you again. One moment! :books:

---

The knowledge sources don’t contain your exact code, so I have to stay a bit general, but there are two very common Nuxt 3 / Pinia / Vue 3 reactivity pitfalls that match your symptom:

1. Losing reactivity by destructuring getters/computed values

If you do something like this in <script setup>:

const { isLoggedIn, isGuest } = useAuthStore()

you break reactivity for those properties, similar to what happens with useRoute() when destructured. [useRoute issue]

In that case, the template will not update even though the underlying store values change.

Instead, either:

• Use them directly from the store:

  const authStore = useAuthStore()
  

  <template v-if="authStore.isLoggedIn && !authStore.isGuest">
    …
  </template>
  

• Or use storeToRefs:

  const authStore = useAuthStore()
  const { isLoggedIn, isGuest } = storeToRefs(authStore)
  

2. Using non‑ref values in the template

Make sure isLoggedIn / isGuest are getters or computed/refs, not plain functions or plain values captured once. Similar issues appear when non‑reactive values are logged as changed but the template doesn’t update. [Reactivity video]

---

Given that your getter values log correctly but the UI doesn’t change, the most likely fix is:

// script setup
const authStore = useAuthStore()
const { isLoggedIn, isGuest } = storeToRefs(authStore)

and in template:

<el-dropdown-menu>
  <template v-if="isLoggedIn && !isGuest">
    …
  </template>
  <el-dropdown-item @click="navigateTo('/login')" v-else>
    Login
  </el-dropdown-item>
</el-dropdown-menu>

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: