vue 首次登陆成功进入页面获取不到store值？

  • Z时代
  • 2024-02-05
  • 分类：IT

computed: {
    ...mapState({
        userInfo: (state) => state.user.userInfo,
    }),
},

首次登录进入页面时，这个值在页面上可以获取到

<div class="wl-left">
   <span>{{userInfo.username}}：</span>
</div>

但是在方法里面调用却是 undefined

async getTopTenData(params) {
    let data;
    this.searchLoading = true
    try {
        data = await getCommTime({
            account: this.userInfo.username,
            dimension: this.activeToggle,
            params
        })
    } catch (error) {
        throw new Error(error)
    } finally {
        this.searchLoading = false
    }
    return { data: data.comm_task_list }
},

求教？

----------------------------补充-------------------------
这是store里面获取的username，并保存到localStorage里面：

const actions = {
  getUserInfo({
    commit,
    dispatch,
    state
  }) {
    axios({
      method: 'get',
      url: '/gateway/api/userInfo',
      headers: {
        'admin-gateway-token': state.token
      }
    }).then(res => {
      const {
        data,
        code,
        msg
      } = res.data
      if (code === 0) {
        localStorage.setItem('userInfo', data.username)
        commit('SET_USERINFO', data)
      } else {
        console.log('获取人员信息失败：', res)
        if (res.data.code === 2000) {
          dispatch('app/logOut', {}, {
            root: true
          })
        }
        Message({
          type: 'error',
          message: '获取人员信息失败：' + msg
        })
      }
    }, res => {
      Message({
        type: 'error',
        message: '获取人员信息失败：' + res
      })
    })
  },

回答：

      if (code === 0) {
        localStorage.setItem('userInfo', data.username)
        commit('SET_USERINFO', data)
      } else {

改成：

      if (code === 0) {
        localStorage.setItem('userInfo', data)
        commit('SET_USERINFO', data)
      } else {

回答：

  1. userInfo 本地localstorage储存一份；
  2. 在main.js初始化vue时，生命周期created ,读取localstorage赋值到vuex的userInfo;

因为有可能登陆刷新了页面，导致userInfo数据丢失

回答：

有可能是在方法调用前，业务逻辑上做了其他的处理，造成了 userInfo 数据丢失，需要排查在方法前的逻辑处理。
需要一个比较完整的交互流程，否则根据目前描述，只能猜测是数据丢失造成，具体哪一步造成，为什么无法定位。

localStorage 里面只存了 username，而非对象，如果再次从 localStorage 里面获取，拿到的就不是一个对象，而只是一个名称，则就没有 username 的属性

回答：

getUserInfo 没地方调用它哇

以上是 vue 首次登陆成功进入页面获取不到store值？ 的全部内容， 来源链接： utcz.com/p/935361.html

回到顶部