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>

流程如下