# 具体遇到的问题
登陆后从store获取的个人信息，刷新页面后不显示了

# 报错信息的截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

login.vue中的代码：

<template>

  <div class="layui-container fly-marginTop">

    <div class="fly-panel fly-panel-user" pad20>

      <div class="layui-tab layui-tab-brief" lay-filter="user">

        <ul class="layui-tab-title">

          <li class="layui-this">登入</li>

          <li>

            <router-link :to="{name: 'reg'}">注册</router-link>

          </li>

        </ul>

        <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">

          <validation-observer ref="observer" v-slot="{ validate }">

            <div class="layui-tab-item layui-show">

              <div class="layui-form layui-form-pane">

                <form method="post">

                  <div class="layui-form-item">

                    <label for="L_email" class="layui-form-label">用户名</label>

                    <validation-provider name="email" rules="required|email" v-slot="{errors}">

                      <div class="layui-input-inline">

                        <input

                          type="text"

                          name="username"

                          v-model="username"

                          placeholder="请输入用户名"

                          autocomplete="off"

                          class="layui-input"

                        />

                      </div>

                      <div class="layui-form-mid">

                        <span style="color: #c00;">{{errors[0]}}</span>

                      </div>

                    </validation-provider>

                  </div>

                  <div class="layui-form-item">

                    <label for="L_pass" class="layui-form-label">密码</label>

                    <validation-provider name="password" rules="required|min:6" v-slot="{errors}">

                      <div class="layui-input-inline">

                        <input

                          type="password"

                          name="password"

                          v-model="password"

                          placeholder="请输入密码"

                          autocomplete="off"

                          class="layui-input"

                        />

                      </div>

                      <div class="layui-form-mid">

                        <span style="color: #c00;">{{errors[0]}}</span>

                      </div>

                    </validation-provider>

                  </div>

                  <div class="layui-form-item">

                    <validation-provider

                      name="code"

                      ref="codefield"

                      rules="required|length:4"

                      v-slot="{errors}"

                    >

                      <div class="layui-row">

                        <label for="L_vercode" class="layui-form-label">验证码</label>

                        <div class="layui-input-inline">

                          <input

                            type="text"

                            name="code"

                            v-model="code"

                            placeholder="请输入验证码"

                            autocomplete="off"

                            class="layui-input"

                          />

                        </div>

                        <div class>

                          <span class="svg" style="color: #c00;" @click="_getCode()" v-html="svg"></span>

                        </div>

                      </div>

                      <div class="layui-form-mid">

                        <span style="color: #c00;">{{errors[0]}}</span>

                      </div>

                    </validation-provider>

                  </div>

                  <div class="layui-form-item">

                    <button class="layui-btn" type="button" @click="validate().then(submit)">立即登录</button>

                    <span style="padding-left:20px;">

                      <router-link :to="{name: 'forget'}">忘记密码？</router-link>

                    </span>

                  </div>

                  <div class="layui-form-item fly-form-app">

                    <span>或者使用社交账号登入</span>

                    <a

                      href

                      onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"

                      class="iconfont icon-qq"

                      title="QQ登入"

                    ></a>

                    <a

                      href

                      onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"

                      class="iconfont icon-weibo"

                      title="微博登入"

                    ></a>

                  </div>

                </form>

              </div>

            </div>

          </validation-observer>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

import { ValidationProvider, ValidationObserver } from 'vee-validate'

import { getCode, login } from '@/api/login'

import uuid from 'uuid/v4'

export default {

  name: 'login',

  components: {

    ValidationProvider,

    ValidationObserver

  },

  data () {

    return {

      username: '',

      password: '',

      code: '',

      svg: ''

    }

  },

  mounted () {

    let sid = ''

    if (localStorage.getItem('sid')) {

      sid = localStorage.getItem('sid')

    } else {

      sid = uuid()

      localStorage.setItem('sid', sid)

    }

    this.$store.commit('setSid', sid)

    this._getCode()

  },

  methods: {

    _getCode () {

      let sid = this.$store.state.sid

      getCode(sid).then((res) => {

        if (res.code === 200) {

          this.svg = res.data

        }

      })

    },

    async submit () {

      const isValid = await this.$refs.observer.validate()

      if (!isValid) {

        // ABORT!!

        return

      }

      login({

        username: this.username,

        password: this.password,

        code: this.code,

        sid: this.$store.state.sid

      }).then((res) => {

        if (res.code === 200) {

          this.$store.commit('setUserInfo', res.data)

          this.$store.commit('setIsLogin', true)

          this.username = ''

          this.password = ''

          this.code = ''

          requestAnimationFrame(() => {

            this.$refs.observer.reset()

          })

          this.$router.push({ name: 'index' })

          // console.log(res)

        } else if (res.code === 401) {

          this.$refs.codefield.setErrors([res.msg])

        }

      }).catch((err) => {

        const data = err.response.data

        if (data.code === 500) {

          this.$alert('用户名密码校验失败，请检查！')

        } else {

          this.$alert('服务器错误')

        }

        // console.log(err.response)

      })

    }

  }

}

</script>

<style lang="scss" scoped>

// 公用样式可以放在App.vue中

</style>

header.vue中的代码：

<template>

  <div class="fly-header layui-bg-black">

    <div class="layui-container">

      <a class="fly-logo" href="/">

        <img src="../assets/logo-2.png" alt="layui" />

      </a>

      <ul class="layui-nav fly-nav layui-hide-xs">

        <li class="layui-nav-item layui-this">

          <a href="/">

            <i class="iconfont icon-jiaoliu"></i>交流

          </a>

        </li>

        <li class="layui-nav-item">

          <a href="case/case.html">

            <i class="iconfont icon-iconmingxinganli"></i>案例

          </a>

        </li>

        <li class="layui-nav-item">

          <a href="http://www.layui.com/" target="_blank">

            <i class="iconfont icon-ui"></i>框架

          </a>

        </li>

      </ul>

      <ul class="layui-nav fly-nav-user">

        <!-- 未登入的状态 -->

        <template v-if="!isShow">

          <li class="layui-nav-item">

            <a class="iconfont icon-touxiang layui-hide-xs" href="../user/login.html"></a>

          </li>

          <li class="layui-nav-item">

            <router-link :to="{name: 'login'}">登入</router-link>

          </li>

          <li class="layui-nav-item">

            <router-link :to="{name: 'reg'}">注册</router-link>

          </li>

          <li class="layui-nav-item layui-hide-xs">

            <a

              href

              onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"

              title="QQ登入"

              class="iconfont icon-qq"

            ></a>

          </li>

          <li class="layui-nav-item layui-hide-xs">

            <a

              href

              onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"

              title="微博登入"

              class="iconfont icon-weibo"

            ></a>

          </li>

        </template>

        <!-- 登入后的状态 -->

        <template v-else>

          <li class="layui-nav-item">

            <a class="fly-nav-avatar" href="javascript:;">

              <cite class="layui-hide-xs">{{userInfo.name}}</cite>

              <!-- <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i> -->

              <i

                class="layui-badge fly-badge-vip layui-hide-xs"

                v-show="userInfo.isVip !== '0'"

              >VIP{{userInfo.isVip}}</i>

              <img :src="userInfo.pic" />

            </a>

            <dl class="layui-nav-child">

              <dd>

                <a href="user/set.html">

                  <i class="layui-icon">&#xe620;</i>基本设置

                </a>

              </dd>

              <dd>

                <a href="user/message.html">

                  <i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息

                </a>

              </dd>

              <dd>

                <a href="user/home.html">

                  <i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页

                </a>

              </dd>

              <hr style="margin: 5px 0;" />

              <dd>

                <a href="/user/logout/" style="text-align: center;">退出</a>

              </dd>

            </dl>

          </li>

        </template>

      </ul>

    </div>

  </div>

</template>

<script>

export default {

  name: 'Header',

  computed: {

    isShow () {

      return this.$store.state.isLogin

    },

    userInfo () {

      return this.$store.state.userInfo || {

        name: '',

        pic: '',

        isVip: '0'

      }

    }

  }

}

</script>

<style lang="scss" scoped>

.fly-logo {

  left: -15px;

  top: -10px;

  margin-left: 15px;

}

</style>

store.js中的代码

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    sid: '',

    isLogin: false,

    token: '',

    userInfo: {}

  },

  mutations: {

    setSid (state, value) {

      state.sid = value

    },

    // 设置用户的基本信息

    setUserInfo (state, value) {

      state.userInfo = value

    },

    // 设置isLogin的状态

    setIsLogin (state, value) {

      state.isLogin = value

    }

  },

  actions: {

  }

})

​