Vuex与Axios

axios

相当于jquery ajax

官网：https://www.kancloud.cn/yunye/axios/234845

将axios挂载到vue的原型上，那么在各个组件中都能使用，因为面向对象（继承）

axios使用:

main.js

//引入axios
import Axios from 'axios'
//将axios挂载到 Vue原型上
Vue.prototype.$https = Axios
​
//设置公共的url
Axios.defaults.baseURL = 'https://www.xxx.com/api/v1/';

Home.vue

methods:{
            //获取 分类列表的数据
            getCategoryList(){
                this.$https.get('course_sub/category/list/')
                .then((res)=>{
                    console.log(res);
                    var data = res.data;
                    if(data.error_no === 0){
                        this.categoryList = data.data;
                        let obj = {
                            id:0,
                            name:'全部',
                            category:0
                        }
                        this.categoryList.unshift(obj);
                        // 数组  删除任意一个指定的元素
                        //指定数组中的索引 删除指定的元素  数组.splice(起始位置,删除的个数)
                    }
                })
                .catch((err)=>{
                    console.log('获取列表失败',err)
                })
            },

但是通常我将所有的请求都放在restful的api.js下,这样也方便后期维护

api.js

import Axios from 'axios'
//设置公共的url
Axios.defaults.baseURL = '公共url';
const categoryListUrl = '/course_sub/category/list/';
const courseListUrl = '/courses/?sub_category=';
const courseDetailUrl ='/coursedetail/?courseid=';
//请求1
export function categoryList(){
    return  Axios.get(categoryListUrl).then(res=>res.data)
}
//请求2
export function courseList(categoryId){
    return  Axios.get(`${courseListUrl}${categoryId}`).then(res=>res.data)
}
//请求3
export function courseDetail(courseId){
    return  Axios.get(`${courseDetailUrl}${courseId}`).then(res=>res.data)

main.js

//引入axios
import Axios from 'axios'
import * as api from './restful/api'
//将axios挂载到api上
Vue.prototype.$https = api;

vue中的请求

ajaxsent(num = 0) {
                //对应api中的相应的请求
                this.$https.courseList(num)
                    .then((res) => {
                        if (res.error_no === 0) {

                            this.msg = res.data;
                            this.msg.forEach((element, index) => {
                                element.colorName = this.colorList[index]
                            })

                        }
                    })
                    .catch((err) => {
                        console.log('获取列表失败', err)
                    });
                this.index_id = num
            },

Vuex

下载

npm i vuex -S

使用

main.js

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state:{
    num:1,
    questionList:[]
  },
  mutations:{
    setMutaNum(state,val){
      console.log(val)
      state.num+=val
    },
    setMutaAsync:function(state,val){
     state.num+=val
    
    },
    course_questions(state,data){
      state.questionList = data;
     
    }
  },
  actions:{
    setActionNum(context,val){
      //Action 提交的是 mutation，而不是直接变更状态。
      context.commit('setMutaNum',val)
    },
    setActionAsync:function(context,val){
      setTimeout(()=>{
        context.commit('setMutaAsync',val)
      },1)
     
     },
     course_questions(context,courseId){
       //异步  aixos 异步
       Axios.get(`course_questions/?course_id=${courseId}`)
       .then((res)=>{
        console.log(res)
        let data = res.data.data;
        context.commit('course_questions',data)
       })
       .catch((err)=>{
        console.log(err)
       })
     }
  }
})

xx.vue

export default {
        name:"CourseDetail",
        created(){
            console.log(this.$route.params.courseId)
            this.$store.dispatch('course_questions',this.$route.params.courseId)
        },
        computed:{
            questionList(){
                return this.$store.state.questionList
            }
        }
    }