axios和vuex

0.babel

将es6代码转换成各个浏览器都能识别的代码

一.axios

1.官方网站

https://www.kancloud.cn/yunye/axios/234845

2.引用:

(1)cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

(2)下载到当前项目***

npm install axios

3.用法

(1)get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

(2)post请求

axios.post('/user', {   
     firstName: 'Fred',   
     lastName: 'Flintstone'  })  
.then(function (response) {   
     console.log(response);  
})  
.catch(function (error) {    
console.log(error);  
});

4.使用实例

在main.js中,将Axios挂载到 Vue原型上,每一个子组件都能够使用

import Axios from 'axios'

Vue.prototype.$https = Axios

Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1/';

二.vuex

作用:组件之间的传值,任何一个组件都能共享state中的数据

下载vuex到该组件:npm i vuex -S

1.vuex商店的创建

在main.js中

import Vue from 'vue'
import App from './App'
import router from './router/index'

//1.引入
import Vuex from "vuex"
//2.组件使用要use
Vue.use(Vuex)
//3.创建一个store实例
const store=new Vuex.Store({
  state:{},
  mutations:{},
  actions:{},
})

new Vue({
  el: '#app',
  router,
  //4.挂载store实例
  store,
  components: { App},
  template: '<div><App></App></div>'
})

2.值的使用

<template>
  <div class="">
    //2.使用
    <h3>我是主页,我是父组件中的{{ num }}</h3>

  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {

    }
  },
  //监听
  computed:{
  //1.定义方法,调用store,返回store中的值
       num:function(){
            return this.$store.state.num
       }
  }
}
</script>


<style >

</style>

3.值的同步修改

在main.js

import Vue from 'vue'
import App from './App'
import router from './router/index'

// Vue.config.productionTip = false

import Vuex from "vuex"
Vue.use(Vuex)
const store=new Vuex.Store({
  state:{num:111},
  mutations:{
      //1.定义如何修改
    setNum(state,val){
      state.num+=val
    }
    },
  actions:{},
});

new Vue({
  el: '#app',
  router,
  //4.挂载store实例
  store,
  components: { App},
  template: '<div><App></App></div>'
});

在Course.vue中

<template>
  <div>我是课程
  <button @click="setnum">+1按钮</button>
    我是父组件中的{{ num }}
  </div>
</template>
<script>
  export default{
  methods:{
      //2.确定修改
      setnum(){
        this.$store.commit("setNum",1)
      }
    },
  computed:{
       num:function(){
            return this.$store.state.num
       }
  }
  }
</script>
<style></style>

4.值的异步修改

在main.js中

import Vue from 'vue'
import App from './App'
import router from './router/index'


import Vuex from "vuex"
Vue.use(Vuex)
const store=new Vuex.Store({
  state:{num:111},
  mutations:{
    setMutaNum(state,val){
      state.num+=val
    },
    setMutaAsync:function(state,val){
      state.num+=val
    }
    },
  actions:{
    setActionNum(context,val){
      context.commit('setMutaNum',val)
    },
    setActionAsync(context,val){
      setTimeout(()=>{
        context.commit('setMutaAsync',val)
      })
    }
  },
});

new Vue({
  el: '#app',
  router,
  //4.挂载store实例
  store,
  components: { App},
  template: '<div><App></App></div>'
});

在course.vue中

<template>
  <div>我是课程
  <button @click="setnum">同步+1按钮</button>
  <button @click="setAsynanum">异步 +5按钮</button>
    我是父组件中的{{ num }}
  </div>
</template>
<script>
  export default{
  methods:{
      setnum(){
        this.$store.dispatch("setActionNum",1)
      },
      setAsynanum(){
        this.$store.dispatch("setActionAsync",5)
      }
    },
  computed:{
       num:function(){
            return this.$store.state.num
       }
  }
  }
</script>
<style></style>

流程如下