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也是在这个基础上去使用的