请求接口到渲染数据的流程

请求接口封装为函数

1. 将请求接口封装为函数，避免导入接口模块时，一次性请求所有接口

// 导入二次封装的axios
import request from '@/utils/request'

// 登录接口
export function loginApi(data) {
  return request({
    url: '/sys/login',
    method: 'post',
    data
  })
}

// 获取用户基本资料接口
export function getUserInfoApi() {
  return request({
    url: '/sys/profile',
    method: 'post',
  })
}

存储数据到vuex

// 导入接口
import { loginApi, getUserInfoApi } from '@/api/user'
// js-cookie vuex持久化，存储token到cookie
import { getToken, setToken } from '@/utils/auth'

const state = {
  token: getToken() || '',
  userInfo: {}
}

const getters = {}

const mutations = {
  // 存储token
  setToken(state, payload) {
    state.token = payload
    // 存储token到cookie
    setToken(payload)
  },

  // 存储用户信息
  setUserInfo(state, payload) {
    state.userInfo = payload
  }
}

const actions = {
  // 异步请求登录接口
  login(context, payload) {

    return new Promise((resolve, reject) => {

      loginApi(payload).then(res => {
        const token = res.data.data
        context.commit('setToken', token)

        // 请求登录成功，存储
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    })
  },


  // 异步获取用户信息
  getUserInfo(context, payload) {
    getUserInfoApi().then(res => {
      const { data } = res.data
      context.commit('setUserInfo', data)
    })
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

全局getters

// 全局getters，简化各个模块中state的获取
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  name: state => state.user.userInfo.username
}
export default getters

组件中使用vuex数据

<template>
  <div class="navbar">
    <h1>{{ name }}</h1>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    // 3.获取用户名
    ...mapGetters(['sidebar', 'avatar', 'name'])
  },
  methods: {
   // 1.获取用户信息接口
    ...mapActions('user', ['getUserInfo']),
  },
  created() {
  	// 2.请求获取用户信息接口
    this.getUserInfo()
  }
}
</script>