Vue.js Vuex Firebase - 无法理解为什么存储数据在浏览器重新加载页面上不可用
我其实不明白当用户在网络浏览器上点击重新加载页面时会发生什么...
第一次登录后显示用户数据是可以的... store.state 数据可用(localStorage 缓存数据也是如此) 但是如果我重新加载页面,即使 store.sate 数据可用,它们也不会再显示..
查看 console.log
=== 开始显示主页 ====================
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: {…}, …}
=== 用户视图 - 显示登录表单 =========
// --- 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 {…}
== 会员视图 - 显示用户/帐户数据======== 显示用户和帐户数据
store.state 中的用户和帐户数据 && 在 localStorage() 中
但是现在当用户在浏览器中点击重新加载页面按钮时
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 突变代码 ---- if (localStorage.getItem('store')) { // 用存储的项目替换状态对象 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
== 成员视图 - 显示用户/帐户数据 ======== 用户和未显示帐户数据(使用 v-model 和 getters)
用户和帐户数据位于 store.state 中 && 在 localStorage() 中
会员视图 - Section1 组件
<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>
已解决...
我的 store.state 初始化如下:
export const state = {
..
user: localStorage.getItem('user') || null,
account: localStorage.getItem('account') || null
这是错误的,用户和帐户是 Firebase 对象,应解析为存储在 localStorage 中的字符串...
export const state = {
..
user: JSON.parse(localStorage.getItem('user')) || null,
account: JSON.parse(localStorage.getItem('account')) || null
刷新页面后,可从 localStorage 中获取对象