vue练手项目（day5：axios\vuex、实现向服务器请求数据并展示）

1.开发流程

        一般前端获取数据并展示的时候，数据是从服务器上得到的，所以此时后端会把服务器接口文档给我们，我们通过访问后端接口拿到数据并进行展示。

2.通过axios获取数据

        和axios相关的内容一般都放在api文件夹内，requests.js放置axios对象，index.vue放置服务器接口方法，并将这些接口对外暴露，则外部可以通过这些方法实现向后端服务器接口的请求。同时也实现了接口方法的统一管理

2.1创建axios实例对象

        请求是通过axios实例对象来发送的，在通过axios.ceate()方法创建axios实例对象的时候需要传入配置对象，基本配置包括baseURL的配置以及TimeOut的配置，如下图所示

// 创建axios实例对象
const requests = axios.create({
    // 配置对象
    baseURL:'/api',
    timeout:5000,
})

2.2配置axios请求拦截器和响应拦截器

        通过请求拦截器和响应拦截器可以在发送请求前或者是响应回来之前进行相关的业务逻辑处理。通过axios实例对象的可以为每个axios实例对象单独配置拦截器。

requests.interceptors.request.use((config)=>{
    nProgress.start();
    return config;
})
requests.interceptors.response.use((res)=>{
    nProgress.done();
    return res.data;
},(error)=>{
    return Promise.reject(new Error('failed'))
})

2.3通过axios实例对象声明请求方法

        将前面定义好的axios对象拿过来，并封装一个请求方法同时对外暴露，外部就可以通过这个请求方式实现访问后台服务器，并且拿到数据，url便是后台服务器提供的接口，method指定请求方法。

        注意request请求后的结果是一个promise对象，也就是说真正的ajax请求是封装在promise对象里面了。

import request from './request'

// 暴露一个方法给外界使用
export const getCategoryList= ()=>request({url:'/product/getBaseCategoryList',method:'get'})

3.Vuex

        首先要弄请求vuex的几大模块：active、mutation、state，以及两个方法：commit和dispatch。 

3.1存数据

        vuex集中管理的数据是存在state里面的，想要修改里面的数据，那么就要通过active和mutation。

        当在vue实例中注册了stroe属性之后，在vue实例对象以及vc身上便多出来一个属性$store，那么便可以通过this.$stroe.dispacth（‘方法名’，数据）去调用active里面的相关方法，并把数据传给这个方法，然后active里面的方法对数据加工后，通过commit（‘方法名’，数据）调用mutation里面对应的方法并把数据传过去，mutation中的方法会被默认传入一个state属性即真正的仓库，然后便可以真正的对数据进行加工了、

3.2取数据

        数据存进去了，那么怎么取出来？答案是通过this.$store.state.属性名，如果想方便一点就通过计算属性封装一个方法，如果想再方便一些就通过Vuex提供的mapState方法。

        mapState接受一个对象，对象里面配置的key可以认为是计算属性名，值可以认为是state里面的属性名，再方便一点可以写成数组形式，即计算属性名和state里对应属性名相同时可以写成数组形式。

3.3vuex模块化

        由于不同的组件有自己的共享数据，如果都放在一起管理未免有些混乱，于是就出现了模块化，为每个组件都配置一个vuex的配置对象，然后在创建vuex实例对象的时候通过modules属性对每个组件的vuex配置对象进行注册。

//Home组件的vuex配置对象
export default {
    namespaced:true,
    state,
    actions,
    mutations,
    getters

//注册Home组件的vuex模块
export default new Vuex.Store({

    modules:{
        home:home
    }
})

4.发送请求，获取数据并展示

        当我们的TypeNav组件挂载完毕之后，我们告诉vuex，我需要数据了，你去帮我拿一下。

 

  mounted() {
    // 通指vuex发请求，获取数据，存储再仓库中
    // 在action处发送请求
    this.$store.dispatch("home/categoryList");
  },

      然后就触发了vuex里的home模块的categoryList方法、因为getCategoryList返回的是axios执行的结果，而axios执行的结果就是一个promise对象，里面的内容是一个异步操作，不等异步操作完成就直接拿结果去用，那么此时promis的状态还是pending，所以需要通过asyc和await，等到promise对象里面的异步操作完成之后再执行下一步。此时result.data就是我们要的数据了，将这个数据再通过commit方法通知mutation里面的CATEGORYLIST方法，通过CATEGORYLIST方法对state里面的数据进行修改。至此vuex已经有了从服务器那里获取到的数据。

const actions = {
    // 向服务器发请求获取数据
    async categoryList({commit}){
        // 返回结果是:Promise
       let result = await getCategoryList();
        if(result.code==200)
        {
            result.data.pop();
            result.data.pop();
            commit("CATEGORYLIST",result.data)
        }
    }
const mutations = {
    CATEGORYLIST(state,categorylist){
        state.categorylist = categorylist;
    }
}
const state = {
    categorylist : []
}

        获取到的数据现在保存在了vuex里面，接下来通过mapState去vuex里面把数据取下来。‘’home‘表明是home模块的，categorylist标识计算属性名为categorylist，同时拿到的数据是state里面名为categorylist的数据，至此数据获取完毕，接下来就是使用v-for遍历展示。 

  computed: {
    ...mapState("home", ["categorylist"]),
  },