vue 这样的函数,怎么提取为公共函数?

vlina
  • 100

在一个组件里有这样一个方法:

name: 'user',
data() {
  const checkExist = (rule, value, callback) => {
    if (value) {
      this.$http.get(....).then(res => {
        if (res.id === this.itemId) {
          ...
        }
      });
    }
    callback();
  };
  return {
    itemId: '',
    rules: {
      name: [{ validator: checkExist, message: ‘名称已存在’ }];
    },
  };
},

其中这个checkExist如何提取为公共函数,可以在别的组件中直接应用。特别有一点不清楚就是函数里使用了axios的封装this.$http,提取为公共函数后该如何处理比较科学?还有如何处理this.itemId的引用?

回复
阅读 4.2k
4 个回答
✓ 已被采纳

推荐我的这种写法:

// utils.js


export const checkExist = http => (rule, value, cb) => {
    if (value) {
        http() // 
    }
    cb()
}

// 调用
import { setUpcheckExit } from 'utils'

const checkExist = setUpcheckExit(this.$http)
...

data() {
    return {
        rules: {
            name: [{ validator: checkExist, message: ‘名称已存在’ }];
        }
    }
}

是在不同的检验中,调用同一个http请求,还是不同校验调用不同请求。

如果是同个请求,直接把checkExist放到一个类似工具函数文件里。

// utils.js
import ... from '...'

export const checkExist = (rule, value, cb) => {
    if (value) {
        this.$http... // 这里使用了基于axios的封装函数,在前面把对应的函数在当前页引入即可
    }
    cb()
}

// 调用
import { checkExit } from 'utils'

...

data() {
    return {
        rules: {
            name: [{ validator: checkExist, message: ‘名称已存在’ }];
        }
    }
}

如果是调用不同请求,老老实实地一个个写就行了。

// utils.js
import ... from '...'

export const checkExist = function(rule, value, cb) {
    if (value) {
        this.$http... // 这里使用了基于axios的封装函数,在前面把对应的函数在当前页引入即可
    }
    cb()
}

// 调用
import { checkExit } from 'utils'

...

data() {
    return {
        rules: {
            name: [{ validator: checkExist.bind(this), message: ‘名称已存在’ }];
        }
    }
}

有很多解决方案,眼光放大一点,上述回答也行,提取成公共类。

但是你又把this关键字写在提取的公共方法里。这不是矛盾吗?,既然你都要提取成公共类了,那么耦合性必然要低,要解耦,不能把this这种耦合性很高的写在公共方法里。

你可以把具体数值作为参数传进去const options = {//参数}; checkExist(options)

还有类似的解决方案:

  • 利用vuex,方法提取放在vuex的数据处理中,可以全局调用。vuex
  • 还有就是直接跟上述一样,用import && export的方式引用。
宣传栏