vue問題筆記

以下問題是我在項目過程中遇到的，解決辦法有針對性，並不一定對各位看官的問題有效，僅供參考～

1、webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

用vue-cli webpack模板搭建的，用着用着發現熱加載失效了，網上百度說可能是因為文件目錄命名有問題，components文件夾下有個目錄是駝峰式命名，改過之后熱加載就有效了

2、父組件獲取異步數據之后，傳給子組件，並且子組件獲取到該數據之后進行渲染。在父組件傳遞數據之前，子組件是是先進行渲染的，所以子組件此時在mounted中打印數據是undefined

解決辦法一：給子組件加v-if，先不讓顯示，等父組件傳遞完數據之后，再將子組件顯示

解決辦法二，可以采用vuex

3、采用vuex，通過action獲取到接口數據，然后賦給state，在組件中想要通過mapGetters獲取到state，然后再渲染該組件。我是將state賦值給另一個新的對象，然后操作新的對象，於是，報錯了

"Error: [vuex] Do not mutate vuex store state outside mutation handlers."

這是因為對象之間是淺拷貝，只拷貝數據，沒有另外開辟存儲空間，所以當更改新的對象時，state也在更新，所以會報錯。

需要進行對象深拷貝

window.clone (obj) {
      let o
      if (typeof obj === 'object') {
        if (obj === null) {
          o = null
        } else {
          if (obj instanceof Array) {
            o = []
            for (var i = 0, len = obj.length; i < len; i++) {
              o.push(window.clone(obj[i]))
            }
          } else {
            o = {}
            for (var j in obj) {
              o[j] = window.clone(obj[j])
            }
          }
        }
      } else {
        o = obj
      }
      return o
    }

用過之后沒有報錯

4、vuex中的store分模塊管理，需要在store的index.js中引入各個模塊，為了解決不同模塊命名沖突的問題，將不同模塊的namespaced:true，之后在不同頁面中引入getter、actions、mutations時，需要加上所屬的模塊名

5、v-for動態渲染接口返回數據時，拼接動態class和img 的 src屬性

<div class="select-card" :class="'color-'+item.logo">

　　由於是讀取本地圖片，放在src/assets/images下，如果直接寫

<img :src="'../../../src/assets/images/bank/'+item.logo+'.png'">

　　網頁把根域名作為相對路徑的根目錄了，然而我們文件的路徑是相對於項目文件的根目錄的，所以會報404，要么把圖片放在static文件夾下，要么就采用require引入

<img :src="require('../../../src/assets/images/bank/'+item.logo+'.png')">

6、獲取的異步數據賦給本地數據后，渲染時需要加屬性，控制點擊隱藏／顯示，更改該新加的屬性不會觸發視圖更新

可以采用this.$set(Object,'newKey','newValue')

7、keep-alive的使用

需求：要求從某個主頁面點擊轉到其他頁面，再從其他頁面回到該頁面時，之前輸入的數據還能保留（也就是，路由跳轉后數據仍保留）

實現：使用keep-alive並且注意路由的配置，讓從這個主頁面路由轉到的其他頁面寫成是該主頁面的子路由。exclude\include也是在這個基礎上去使用的