登录成功后,将登录信息保存到localStorage中,登录后的首页应该将登录注册换成用户名,并且包含下拉选择,组件中我根据v-if来判断显示那部分的组件,结果未达到预期的效果,不知道问题出在哪里
登录:
Login(this.credentials.email,this.credentials.password)
.then(res => {
var data = res.data;
if(data.error == ""){
this.SET_USER(data.data);
this.$router.go(-1);
}
})
SET_USER和GET_USER:
[SET_USER](state, user) {
state.user = user;
setStore('user_id', user.id);
setStore('user_name', user.username);
setStore('session_id', user.session_id);
},
[GET_USER](state, user) {
state.user = user;
}
setStore以及getStore:
/**
* 存储localStorage
*/
export const setStore = (name, content) => {
if (!name) return;
if (typeof content !== 'string') {
content = JSON.stringify(content);
}
window.localStorage.setItem(name, content);
}
/**
* 获取localStorage
*/
export const getStore = name => {
if (!name) return;
return window.localStorage.getItem(name);
}
header组件:
<template v-if="user">
<router-link to="/login" :exact="true">登录 </router-link>
<router-link to="/signin" :exact="true">注册 </router-link>
</template>
<template v-else>
<b-nav-item-dropdown :right="!isRTL" class="demo-navbar-user">
<template slot="button-content">
<span class="d-inline-flex flex-lg-row-reverse align-items-center align-middle">
<span class="px-1 mr-lg-2 ml-2 ml-lg-0">{{ user.username }}</span>
</span>
</template>
<b-dd-item><i class="ion ion-ios-person text-lightest"></i> 个人中心</b-dd-item>
<b-dd-divider />
<b-dd-item><i class="ion ion-ios-log-out text-danger"></i> 退出登录</b-dd-item>
</b-nav-item-dropdown>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { GET_USER } from '@/store/mutations'
export default {
name: 'app-layout-navbar',
props: {
sidenavToggle: {
type: Boolean,
default: true
}
},
created(){
this.getUser();
},
mounted(){
},
computed: mapState({
user: state => {
console.log(state,'mapstate');
return state.user
}
}),
methods: {
...mapActions([
'getUser'
]),
toggleSidenav () {
this.layoutHelpers.toggleCollapsed()
},
getLayoutNavbarBg () {
return this.layoutNavbarBg
}
},
}
</script>
action:
export default {
login(context, user) {
context.commit(SET_USER, user);
},
getUser(context, user) {
var data = {
id: getStore('user_id'),
username: getStore('user_name'),
session_id: getStore('session_id'),
}
context.commit(GET_USER, data)
}
}
store:
const state = {
user: null
};
Vue.use(Vuex)
const store = new Vuex.Store({
state,
mutations,
actions
})
vue-devtools:
Base State中的user获取不到值,不知道是我刷新的时候触发的不对还是什么原因。
好吧,判断的问题,判断错了。