У меня есть initial
(стартовая) страница, где пользователь может нажать кнопку для входа.Также, когда на этой странице я хочу знать, вошел ли пользователь в систему или нет, я использую mapState
для доступа к переменной состояния isLoggedIn
моего магазина.
В коде:
// Initial.vue
<template>
<v-container
app
fluid
>
<v-parallax
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
height="1000"
>
<v-layout
row
wrap
>
<!-- LOGIN-->
<v-toolbar
flat
light
dense
color="transparent"
>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn
medium
color="lime lighten-2"
@click="login"
class="font-weight-bold title text-uppercase"
>
LOGIN
</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-layout
align-center
column
>
<h1 class="display-2 font-weight-thin mb-3 text-uppercase lime--text lighten-2" >My page</h1>
<h4 class="subheading">{{isLoggedIn}}</h4>
</v-layout>
</v-layout>
</v-parallax>
</v-container>
</template>
<script>
import VContainer from "vuetify/lib/components/VGrid/VContainer";
import VLayout from "vuetify/lib/components/VGrid/VLayout";
import VBtn from "vuetify/lib/components/VBtn/VBtn";
import VToolbar from "vuetify/lib/components/VToolbar/VToolbar";
import VParallax from "vuetify/lib/components/VParallax/VParallax";
import { mapState } from 'vuex';
export default {
name: "Initial",
components: {
VContainer,
VLayout,
VBtn,
VToolbar,
VParallax
},
//Upon returning to this page isLoggedIn is false eventhough isLoggedIn has been updated to store
computed: mapState({
isLoggedIn: state => state.isLoggedIn
}),
methods: {
login() {
this.$auth.login();
},
}
}
</script>
<style scoped>
</style>
После входа пользователя в систему (через auth0
) он перенаправляется на регистрационную форму.После отправки формы данные отправляются на сервер, я запускаю действие REGISTER
, чтобы обновить состояние хранилища, а затем перенаправить на /home
.Код, который делает это:
//CompleteSignup.vue
this.$store.dispatch(REGISTER,registerFormData)
.then(() => this.$router.push('/home'));
И мой магазин такой:
//index.js
import Vue from 'vue';
import Vuex from 'vuex';
import {APIService} from '@/common/api.service';
import {REGISTER} from "./actions.type";
import {SET_ERROR, SET_AUTH} from "./mutations.type";
Vue.use(Vuex);
export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state: {
errors: null,
user: {},
isLoggedIn: false
},
getters: {
currentUser(state) {
return state.user;
},
},
actions: {
[REGISTER]({commit}, registerData) {
return new Promise((resolve, reject) => {
APIService.create(registerData)
.then(({data}) => {
commit(SET_AUTH, data);
resolve(data);
})
.catch(({response}) => {
commit(SET_ERROR, response.data.errors);
reject(response);
});
});
}
},
mutations: {
[SET_ERROR](state, error) {
state.error = error;
},
[SET_AUTH](state, user) {
state.isLoggedIn = true;
state.user = user.user_id;
state.errors = {};
}
}
})
Когда я в /home
, я вижу из devtools Vue, что мои переменные хранилищаправильно обновлены:
Проблема возникает, когда я возвращаюсь на страницу /initial
. Я ожидаючто когда пользователь вернется к этому представлению, значение computed
isLoggedIn
вернет true
;но вместо этого я получаю значение хранилища по умолчанию (false
).
Почему mapState
не возвращает true
для переменной хранилища isLoggedIn
?
Также - хотя я не уверен, что это связано - я заметил, что в этом сценарии vue devtools
снова показывает первый Base state
прикрепленного снимка экрана в качестве активного (с той же отметкой времени).Это как если бы действие возврата вернулось к исходному состоянию вместо создания нового.