vue 开发过程中的问题解决记录

给axios请求增加全局参数

项目需要在请求中加入统一的签名、时间戳和序列号，直接用 config.params 或 config.data 追加参数时遇到报错，后来发现可以用下边的方法来实现：

if (config.method === 'get' || config.method === 'GET') {
      config.params = {
        ...(config.params || {}), 
        sequenceId: uuid().replace(/-/g, ''),
        timestamp: new Date().getTime()
      }
}

... 是 js 的扩展运算符（ spread ），用于将一个数组转为用逗号分隔的参数序列。

因为签名规则是要把 timestamp 和 sequenceId 都加进去，所以要把它们和之前的参数先提取出来，然后再根据请求类型加进去。

    const data = {
      ...(config.method === 'get' || config.method === 'GET' ? (config.params || {}) : (config.data || {})),
      sequenceId: uuid().replace(/-/g, ''),
      timestamp: new Date().getTime()
    }
    // 签名算法 common是公用方法模块，引入后调用
    const sign = common.getSign(setter.apiKey, data)

    config.method === 'get' || config.method === 'GET' ? (config.params = {
      ...(data || {}),
      sign: md5(sign)
    }) : (config.data = {
      ...(data || {}),
      sign: md5(sign)
    })

resetFields() 失效：

在 el-form-item 上加 prop="字段名" 即可。

axios 抛出详细的错误信息

使用 error.response

刷新就跳转到 404

百度搜一把，全是什么更改模式，最后对比之前代码才发现是我改动了 { path: '*', redirect: '/404', hidden: true } 的位置，放到异步路由中一点问题都没有，但是放在本地路由中就刷新跳转，ok，你赢了。

两个对象取并集

用于数据修改时数据库数据比页面定义的表单多但又没必要时。

  objectIS(sourceObj, targetObj) {
    return Object.keys(targetObj).reduce((intersection, key) => {
      intersection[key] = (typeof targetObj[key] === 'object')
        ? this.objectIS(sourceObj[key], targetObj[key])
        : sourceObj[key]
      return intersection
    }, {})
  }

接口获取数据无法渲染到table

查看接口内的 this 和外部是否一致，然后检查名字和 ref 是否一致。

获取 tree 当前选中

需要写好 tree 中 ref，然后通过 this.$refs.treeName 去调用，未选中会返回 null。

this.$refs.rolesTree.getCurrentNode()

新增、删除数据后更新表格数据

删除用 this.list..splice(index, 1)
新增用 this.list.push({id:1,name:'wu'})

但是新增的数据是在列表最下边，倒序的话就很尴尬。所以还是直接再调用下请求列表的接口吧。

Dialog 中 form 表单重置

this.$nextTick(() => { this.$refs.postForm.resetFields() })

el-xxx 元素修改样式无效

去掉 style 标签上的 scoped

表单提交时,后台报错无法重复使用

需要使用清空和 self.$nextTick，我在用的时候这两个必须同时用，否则不生效。

const self = this
this.errors = {}
error.data.forEach(function(item, index) {
      self.$nextTick(() => {
      self.errors = { [item.field]: item.message }
   })
 })

v-for 报错

用 v-for 便利数据时遇到以下报错：

Custom elements in iteration require 'v-bind:key' directives. (vue/valid-v-for)

在 v-for 后边加上 :key = 'item.id' 即可。