I actually do not understand what happen when user hits thr reload page on the web browser ...
Getting user data displayed after login on first pass is OK... store.state data are available ( so are localStorage caching data) But if I reload the page the even if store.sate data are available they are NOT displayed anymore ..
see the console.log
=== starts displaying home page ===================
console.log
ROUTER BEFORE to:
{name: "Home", meta: {…}, path: "/home", hash: "", query: {…}, …}
App.vue?26cd:72 APP VUE - beforeCreate initialiseStore
root.js?f07d:207 mutation initialise_store
main.js?1c90:61 MAIN.JS FB auth().onAuthStateChanged() - user not logged in
root.js?f07d:112 STORE ACTION setUser: null
backend.js:1 vue-devtools Detected Vue v2.5.16
router.js?15ee:71 ROUTER BEFORE to:
{name: "Users", meta: {…}, path: "/users", hash: "", query: {…}, …}
=== Users view - display login form ========
// --- onSubmit method code ----
onSubmit()
....
this.$store.dispatch('signUserIn', { email: this.email, password: this.password })
.then(result => {
console.log('SIGNIN SUCCESSFUL: ', result)
this.$router.push('member')
})
console.log
main.js?1c90:59 MAIN.JS FB auth().onAuthStateChanged() - user authenticated
store/root.js?f07d:104 END SIGNIN PROCESS
Sectio1.vue?91e7:191 SIGNIN SUCCESSFUL: ok
router.js?15ee:71 ROUTER BEFORE to:
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:73 ROUTER protected page:
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:79 ROUTER user authenticated:
Lk {…}
== Member view - display user / account data ======== user & account data displayed
user & account data in store.state && in localStorage()
BUT NOW WHEN USER HIT RELOAD PAGE BUTTON IN BROWSER
console.log
ROUTER BEFORE to:
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:73 ROUTER protected page:
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:79 ROUTER user authenticated: {"uid":"kRdsicIfuRYSTj2sWxfejhMevtr2","displayName":null,"photoURL":null,"email":"[email protected]","emailVerified":false,"phoneNumber":null,"isAnonymous":false,"providerData":[{"uid":"[email protected]","displayName":null,"photoURL":null,"email":"[email protected]","phoneNumber":null,"providerId":"password"}],"apiKey":"AIzaSyBhOu_bc_8NdQW7EOEFHfjljLnNwbu3guk","appName":"[DEFAULT]","authDomain":null,"stsTokenManager":{"apiKey":"AIzaSyBhOu_...9ufFog","expirationTime":1530868322723},"redirectEventId":null,"lastLoginAt":"1530864722000","createdAt":"1530111422000"}
App.vue?26cd:72 APP VUE - beforeCreate initialiseStore
store/root.js?f07d:207 mutation initialise_store
// --- initialise_store mutation code ---- if (localStorage.getItem('store')) { // Replace the state object with the stored item console.log('mutation initialise_store') this.replaceState(Object.assign(state, JSON.parse(localStorage.getItem('store')))) }
console.log
backend.js:1 vue-devtools Detected Vue v2.5.16
main.js?1c90:59 MAIN.JS FB auth().onAuthStateChanged() - user authenticated
== Member view - display user / account data ======== user & account data not displayed ( using v-model & getters )
user & account data ARE in store.state && in localStorage()
Member View - Section1 component
<template>
....
<v-card-text class="grow">
<v-text-field disabled v-model="user.email" ....></v-text-field>
<v-text-field disabled v-model="user.name" ....></v-text-field>
....
<v-text-field disabled v-model="account.givenName" ....></v-text-field>
....
</template>
<script>
import { mapGetters } from 'vuex'
....
computed: {
...mapGetters(['user', 'account']),
...
<s/cript>