vuejs3 - nuxtjs app.vue does not detect store change in app.vue - Stack Overflow

admin管理员组

文章数量:1123567

I am using nuxtjs v3 for SSR. I am lost, and I can't figure it out. I have a central store in the composable folder.

import { storageService } from "./../services/storageService";
import { storageKeys } from "./../infrastructure/enums";

export const useAppState = () => {
  const appState = useState('appState', () => defaultAppState);

  const setCard = (card: any) => {
    appState.value.card = { ... card };
  };

  const clearCard = () => {
    appState.value.card = undefined
  };
  
  const setPlayer = (player: any) => {
    appState.value.player = {
      ...player
    }
  };
    
  const clearPlayer = () => {
    appState.value.player = undefined
  };
  
  const getUser = () => appState.value.user;

  const setUser = (user: any) => {
    appState.value.user = {
      isAuthenticated: true,
      lastLogin: new Date(),
      ...user,
    };
  };

  const signOutUser = () => {
    appState.value.user = {
      lastLogin: null,
      isAuthenticated: false,
      roles: [],
    };
  
    storageService.remove(storageKeys.customer);
    storageService.remove(storageKeys.user);
    storageService.remove(storageKeys.selectedGiftCard);
    storageService.remove(storageKeys.recipient);
    storageService.remove(storageKeys.card);
    storageService.remove(storageKeys.player);
    }

    return {
      setCard,
      clearCard,
      setPlayer,
      clearPlayer,
      getUser,
      setUser,
      signOutUser
    }
}

export default useAppState;

const defaultAppState = {
  currentLanguage: 'en-EN',
  user: {
    isAuthenticated: false,
    roles: [],
    lastLogin: null
  },
  loading: true,
  card: undefined,
  player: undefined
}

In the app.vue I need to check if the user is authenticated. This isn't my all view, just the important one.

<template>
    <NuxtLayout>
      <NuxtLoadingIndicator /> 
      <NuxtPage />
    </NuxtLayout>
    <div class="template-nav-links-contaier">
      <div>
        <div class="nav-link-heading"><strong>My account</strong></div>
        <div class="nav-link-list">
          <NuxtLink v-if="!state?.user?.isAuthenticated" class="nav-link-list-element" @click="() => router.push(appRoutes.login)">Login</NuxtLink>

          <NuxtLink v-if="state?.user?.isAuthenticated" class="nav-link-list-element" :to="appRoutes.customer.info">My account</NuxtLink>
          <NuxtLink v-if="state?.user?.isAuthenticated" class="nav-link-list-element" :to="appRoutes.orders.history">Orders</NuxtLink>
          <NuxtLink v-if="state?.user?.isAuthenticated" class="nav-link-list-element" @click="() => onSignOutUser()" style="cursor: pointer;">Logout</NuxtLink>
        </div>
      </div>
  </div>
</template>

<script setup>
import { useAppState } from './composables/appState';
const { getUser } = useAppState();

  const state = reactive({
    user: getUser()
  });
</setup>

I tried also to watch the change as computed

state.user = computed(() => {
  const a = getUser();
  return a;
});

After the login happens (no errors) on navigating back to the home page, the page is not rendered. I can see in the debug that the computed got executed, the user is retrieved, but the page did not render (blank page, and I can't see any errors in the console that could point me in some direction)..

edited:

Login submit button click event function (I am posting just the end of it)

  const onSubmitAsync = async () => {

    const redirect = router.currentRoute.value.query.redirect;
    const path = redirect ? redirect : appRoutes.index; 
  }

本文标签： vuejs3nuxtjs appvue does not detect store change in appvueStack Overflow