axios,vuex

1. resource:

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

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

   get：

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

   post:

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

2. 怎么解决vue的跨域问题

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

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

   3.axios

   ​ 下载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:可以将模块进行拆分

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

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