axios,vuex

resource:

本地的数据内容应该放在static文件夹下

先下载npm install vue-resource ,在main.js中引入 vue-resource，使用 Vue.use（）；

get：

在需要请求数据的页面使用this.$http.get(路径).then((数据)=>{ 请求成功后拿到数据})

post:

在需要请求数据的页面使用this.$http.post(路径,{发送到后台的数据}).then((res)=>{后台返回的数据})

怎么解决vue的跨域问题

在config文件夹下index.js配置代理

 proxyTable: {
      '/api': {
      target: 'http://localhost:3000', //目标接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
      '^/api': '' //重写接口
      }
      }
      }

3.<mark>axios</mark>

​ 下载axios,在main.js下import引入axios,把axios挂载到Vue原型下

​ Vue.prototype.$axios = axios当做全局数据

get:

his.$axios.get(路径).then(()=>{})

post:

this.$axios.post(路径,{发送到后台的数据}).then((res)=>{成功时后台返回的数据}).catch(()=>{失败})

4. axios除了get和post请求还有其他方法吗？

   其他的一些方法都是get和post方法的别名，用法完全一样，类似于H5中标签语义化

   axios.request(config)
   axios.get(url[,config])
   axios.delete(url[,config])
   axios.head(url[,config])
   axios.options(url[,config])
   axios.post(url,data[,config])
   axios.put(url,data[,config])
   axios.patch(url,data[,config])
   

5. 使用qs莫魁岸把传入后台的数据，在前端将对象转为字符串形式再发送给后台,如user=1&password=2

   npm install qs

   在main.js中引入，在vue原型下挂载 Vue.prototype.$qs= qs

   进行数据转化发送给后台this.$qs.stringify(要转化的对象)

   let params = this.$qs.stringify({//把对象转为字符串再传给后台
     user:this.user,
     password:this.pass
   });
   
   this.$axios({
     url:"/api",
     data:params,//转化过后的数据
     method:'post'
   
   }).then((res)=>{
       console.log(res)
   }).catch(()=>{
     console.log("失败")
    })
     }
   

6. 合并请求：一次性可以请求多个接口的数据

    getAllData(){
        let getHeadData =()=>{
          return this.$axios.get("./../../static/txt.json");//路径1，此处为本地static下json文件
   
        };
        let getFootData = ()=>{
          return this.$axios.get("https://api.github.com/users/octocat/gists")//路径2, 此处为github
        }
   
   	//Promise下all方法 ，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。  this.$axios.all([getHeadData(),getFootData()]).then(this.$axios.spread(function(res1,res2){//spread axios下并发请求的方法
          console.log(res1.data)
          console.log(res2)
        }))
    }
   

7. vuex：进行状态管理的库，把公共数据提取出来，供各个组件去使用

   Vuex包含5个模块

   state:存储公有数据的仓库

   Mutations:存储公有方法的仓库

   Getters:存储公有计算属性的仓库

   Actions:异步操作mutations中的方法

   Modules:可以将模块进行拆分

   <mark>注：操作mutations下的方法时，不能（最好）直接进行操作，要调用$store.commit(‘事件的语句柄’)触发</mark>

   ​ 操作actions下的方法时，同样不能直接操作.要使用dispatch(‘事件的语句柄’)派发actions下对应的异步操作mutations中的方法