記錄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時，再將值初始化即可，這樣可以避免很多不必要的坑