vue中一些模块的使用备注

1、computed计算属性

计算属性数据会被缓存，可用于性能优化。这时就需要用computed中的get和set属性，get完成计算赋值，set数据修改时执行预设代码，不修改不必反复调用。

<template>
  <div class="hello">
    <h3> {{newMsg}}</h3>
    <h3>{{num}}</h3>
    <button @click="handNum">修改</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed: {
    num: {
      get () {
        return this.msg
      },
      set (val) {
        this.msg = val
        this.newMsg += val
      }  
    }
  },
  methods: {
    handNum () {
      this.num = 'new' + this.num
    }
  },
  data () {
    return {
      newMsg: 'Hello ',
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

1、axios网络请求

• 基本使用

import axios from 'axios'
// 基本请求
axios({
  url: 'http://123.207.32.32:8000/home/multidata', 
// 如需跨域则http://123.207.32.32:8000/home/multidata?callback=123
  method: 'get'
}).then(data => {
  console.log(data)
})
axios({
  url: 'http://123.207.32.32:8000/home/data',
  params:{
    type: 'pop',
    page: 1
  }
}).then(data => {
  console.log(data)
})

axios.defaults.baseURL = 'http://123.207.32.32:8000'  // 默认设置根路径
axios.defaults.timeout = 6000  // 默认设置超时时间

// 并发请求
axios.all([
  axios({
    url: '/home/multidata'
  }),
  axios({
    url: '/home/data',
    params:{
      type: 'pop',
      page: 1
    }
  })
]).then(axios.spread((data1,data2) => {
  console.log(data1) 
  console.log(data2) 
}))

// 创建axios实例
const ios_a = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 3000
})

ios_a({
  url: '/home/multidata'
}).then(data => {
  console.log(data)
})

• 单独封装

1、建一个js文件用来封装axios
// 方案1
import axios from 'axios'
export function request (config, success, failure) {
  const request_a = axios.create({
    baseUrl: 'http://123.207.32.32:8000',
    timeout: 4000
  })
  request_a(config).then(res => {
    success(res)
    }).catch(err => {
      failure(err)
    })
}
// 方案2
export function request (config) {
  const request_a = axios.create({
    baseUrl: 'http://123.207.32.32:8000',
    timeout: 4000
  })
  return request_a(config)
}


2、拦截器的使用
export function request (config) {
  const request_a = axios.create({
    baseUrl: 'http://123.207.32.32:8000',
    timeout: 4000
  })
  // axios.interceptors // 全局拦截
  // 请求拦截
  request_a.interceptors.request.use(config => { // 成功拦截
    console.log(config)  
    return config // 返回数据继续
  }, err => { // 失败拦截
    console.log(err)
  })
  // 响应拦截
  request_a.interceptors.response.use(res => { // 成功拦截
    console.log(res)
    return res.data // 返回数据继续
  }, err => { // 失败拦截
    console.log(err)    
  })
  return request_a(config)
}


3、在逻辑页面使用设置封装好的请求，并传入参数
import {request} from './network/request' // 引入封装的函数
// 方案1
request(
 {url: '/home/multidata'},
 res => { console.log(res)},  // 成功回调
 err => {console.log(err)}   // 失败回调
 )
// 方案2
request('/home/multidata').then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})