Vue3: Can't fetch when page reloaded, but can fetch when redirected-CodePudding

I'm having an issue with fetching an object inside of my Vuex store. I think the problem resides in either the setup() or mount().

So, whenever I login, I want to be redirected to my profile page (/login ->/me). When this happens, I manage to pull the necessary information from the Vuex store:

So far so good. However, when I reload the page, I can't seem to fetch the data and get these errors in the console:

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of render function 
  at <VCardTitle> 
  at <VCard> 
  at <VRow justify="center" > 
  at <ProfilePage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>
...
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <VCardTitle> 
  at <VCard> 
  at <VRow justify="center" > 
  at <ProfilePage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>
...
ProfilePage.vue:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toUpperCase')
    at ProfilePage.vue:6:63
    at Proxy.renderFnWithContext (runtime-core.esm-bundler.js:847:21)
    at Proxy.<anonymous> (createSimpleFunctional.ts:22:10)
    at renderComponentRoot (runtime-core.esm-bundler.js:890:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5602:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at instance.update (runtime-core.esm-bundler.js:5716:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5730:9)
    at mountComponent (runtime-core.esm-bundler.js:5512:9)
    at processComponent (runtime-core.esm-bundler.js:5470:17)

I know the vuex store contains the data thru the Vue DevTools.

Here's my code:

//ProfilePage.vue
<template>
  <nav-bar></nav-bar>
  <v-row justify="center">
    <v-card>
      <v-card-title>
        {{ currentUser.first_name }} {{ currentUser.last_name.toUpperCase() }}
      </v-card-title>
      <v-card-text>
        {{ currentUser.description }}
      </v-card-text>
    </v-card>
  </v-row>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  data() {
    return {};
  },
  setup() {
    const store = useStore();
    return {
      currentUser: computed(() => store.getters.getUser),
    };
  },
};
</script>

CodePudding user response：

When the page is refreshed, the vuex state is lost and reset to default. If you want state to persist you can use vuex-persistedstate plugin or some similar tool or you can use local storage to save state there.

CodePudding user response：

You didn't show what's happening in your Vuex.

Also you're importing computed from @vue/runtime-core.

The docs said it's not for app use i.e internal use only.

Docs: https://www.npmjs.com/package/@vue/runtime-core

Next, assign an empty string instead as default value instead of undefined or at least check in the template if currentUser.last_name.

You have {{ currentUser.last_name.toUpperCase() }} in your template and the error says

ProfilePage.vue:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toUpperCase')

Here's a working codesandbox: https://codesandbox.io/s/https-stackoverflow-com-questions-73912912-6f6syv