记录vue中一些有意思的坑

记录vue中一些有意思的坑

'message' handler took 401ms

在出现这个之前，我一直纠结于 是如何使用vue-router或者不使用它，通过类似的v-if来实现。结果却出现这个问题，吓得我赶紧使用v-if，结果问题依旧存在。心里拔凉拔凉的

解决方案

• 在查看别人方案时，才发现是自己为了不使用他人插件，只单纯拿其数据，不曾想，数据源过大，导致编译过程时间过长，把其去掉就好了。然后我的vue-router被我都换掉了。不过也无所谓了，路由传参时，若不想在地址栏中显示，一刷新传过来的值都没有了，不如使用vuex实在。另外组件懒加载，也可以使用，不在意了。不过还是想使用路由，感觉简介，条例清晰些

vuex 中 actions 异步使用，结合axios数据请求

最近一直在考虑，有没有必要每次请求都要经过 vuex 的 actions，同时也发现一些痛点，就是有些过程是需要在当前页面进行请求更好，因为需要及时显示值，而这些值首次并不能是空，及时之后值请求到，方法无法再次调用，导致值无法及时显示。只能在当前页面请求较好，而且这个值只是当前这一个位置使用而已。

加上兄弟组件较多，涉及到不同组件同时请求一个接口，这个适合放在vuex中，因而个人建议，可以确定这个接口请求的数据只有这里使用，且有且仅有当前这个组件进行数据请求，不涉及到其他组件请求时，直接放在当前页面进行请求即可。 既可以减少vuex的负担，也可以 减少代码量，因为为了拿到请求后的数据，需要些许多不必要的代码。

使用封装的fetch.js时，考虑更加灵活些

import axios from 'axios'
import { baseUrl } from './../apis/api.js'
import { Loading } from 'element-ui'
axios.defaults.baseURL = baseUrl
axios.defaults.headers = {'Content-Type': 'application/json', 'Accept': 'application/json'}
axios.defaults.timeout = 10000
/**
 * get 请求数据进行修改  默认以对象形式传参
 */
function getDataConfig (data = {}) {
  if (typeof data !== 'object') return data
  const arr = []
  for (let key in data) {
    let res = `${key}=${data[key]}`
    arr.push(res)
  }
  const str = arr.join('&')
  return str
}
axios.interceptors.request.use(config => {
  return config
}, error => {
  return Promise.reject(error)
})
axios.interceptors.response.use(response => {
  return response.data
}, error => {
  return Promise.reject(error)
})
const fetch = {
  post (url, request, code = 1000) {
    let loadingInstance = Loading.service({'background': 'rgba(0, 0, 0, .6)'})
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url,
        data: request
      }).then(response => {
        loadingInstance.close()
        const res = response.data
        if (res && response.code === code) {
          resolve(response)
        }
        reject(response)
      }).catch(error => {
        loadingInstance.close()
        reject(error)
      })
    })
  },
  get (url, request, code = 1000) {
    let loadingInstance = Loading.service({'background': 'rgba(0, 0, 0, .6)'})
    const data = getDataConfig(request)
    return new Promise((resolve, reject) => {
      axios({
        method: 'get',
        url: url + '?' + data
      }).then(response => {
        loadingInstance.close()
        const res = response.data
        if (res && response.code === code) {
          resolve(response)
        }
        reject(res)
      }).catch(error => {
        loadingInstance.close()
        reject(error)
      })
    })
  }
}
export default fetch

特别是现在需求实时变化，若是这样一成不变，很受被动

• 当后台不返回想要的参数时，就会因为封装不灵活，直接报错 因为data这个属性都没有
• 在使用loading时，要设计灵活，在有些请求地方，loading是另外一种展现形式，有时页面请求，根本不需要都显示loading，只是区域性显示，而这封装的便会影响体验

使用vuex时的注意问题

在使用vuex时，老是发现，当前并没有值，确总是存在上一次保留的值，之前一直很莫名其妙，不得已在看Vue.js devtools中查看时，发现上次请求的数据依旧存在，导致下次请求数据时，直接拿里面的值了，这就是为何一进页面就有值（没有进行数据请求时），思来想去这个情况会经常存在，考虑若是其他页面不共用，同时数据也不许额外进行保留时，可以在组件进行销毁时destroyed时，再将值初始化即可，这样可以避免很多不必要的坑