axios二次封装（拿到后端服务器返回的数据）+vuex接收数据

axios二次封装

1. 首先安装axios模块：
   在终端输入npm install axios进行安装，如果出现报错信息可能是因为axios和npm的版本不兼容，可以试下npm install --legacy-peer-deps axios --save这个命令进行安装。在package.json文件中有axios信息时，则说明安装成功

2. 配置api文件：
   在src\assets\api文件夹下创建一个request.js文件用来给axios做二次封装，具体代码如下：

// 引入axios包
import axios from 'axios'

// 创建一个axios实例
const requests = axios.create({
  baseURL: 'http://13.229.54.3:7000/api', // 地址前缀、基础URL:以后访问服务器默认加上这个前缀
  timeout: 5000 // 超时时间
})

// 请求拦截器:在请求发过去之前要做的事情
requests.interceptors.request.use((config) => {
  return config // 返回一个配置对象包括重要的header请求头
})

// 相应拦截器:请求失败或成功的反馈
requests.interceptors.response.use((res) => {
  return res.data // 请求成功
}, () => {
  return Promise.reject(new Error('faile')) // 请求失败
})

// 往外暴露axios
export default requests

3. index.js使用

// 引入request模块
import requests from './requset'

// 向外暴露一个函数，来接收请求
export default {
  // userList的请求方式
  userList () {
    return requests({
      url: '/user',
      method: 'post',
      data: {
        current: 1,
        size: 5
      }
    })
  },
  addData () {
    return requests({
      url: '/user/add',
      method: 'post'
    })
  }
}

vuex存储数据

1. 在store文件夹下创建一个小仓库user.js里面存储来自服务器的数据

// 导入axios封装模块
import api from '@/assets/api/index'
// 直接向外暴露以下模块
export default {
  state: {
    userList: []
  },
  mutations: {
    USERLIST (state, userList) {
      state.userList = userList
    }
  },
  actions: {
    // 通过api'接口调用，向服务器发请求，获取服务器数据
    async userList ({ commit }) { // userList是在mounted定义的
      const result = await api.userList() // 使用引入的api函数，获取userList的地址请求
      console.log(result)
      commit('USERLIST', result.data) // 提交result并把返回结果赋值给USERLIST，最后再在mutats里面定义USERLIST
    }
  }
}

2. 最后在index.js文件中引用一下

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user
  }
})

3. 最后在组件中去使用这个vuex

<script>
import { mapState } from 'vuex'
export default {
  mounted () {
    // 通知vuex发请求，获取到的数据存储在仓库中,名字叫userList
    this.$store.dispatch('userList')
  },
  computed: {
    // 计算属性
    ...mapState({
      // 定义一个userList传递接收过来的数据，在store仓库中的user标签里面的userList传过来
      userList: (state) => state.user.userList
    })
  }
}
</script>