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

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
      })
    })
  },