vue登录成功跳转后,首页登录注册状态未改变

登录成功后,将登录信息保存到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">登录&nbsp;&nbsp;</router-link>
      <router-link to="/signin" :exact="true">注册&nbsp;&nbsp;</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> &nbsp; 个人中心</b-dd-item>
        <b-dd-divider />
        <b-dd-item><i class="ion ion-ios-log-out text-danger"></i> &nbsp; 退出登录</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:

clipboard.png

clipboard.png

Base State中的user获取不到值,不知道是我刷新的时候触发的不对还是什么原因。

阅读 4.6k
1 个回答

好吧,判断的问题,判断错了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题