代码之家 › 专栏 › 技术社区 › armnotstrong

vue将其绑定到导入的规则函数

vue.js javascript

armnotstrong · 技术社区 · 6 年前

我有多个Vue文件,它们共享相同的字符串验证检查逻辑,比如:

data(){
        return {
            dialog: false,
            unitEditing:{},
            codeRules:[
                v => !!v || 'can't be empty',
                v => !(/\s/g.test(v)) || 'can't contain space'
            ],
            idRules:[
                v => !!v || 'can't be empty',
                v => !(/\s/g.test(v)) || 'can't contain space',
                v => (this.unitEditing.platform != "unity" || (v=="video" || v=="rewardedVideo")) || "placement for unity should only be video or rewardedVideo"
            ],
        }
    },

我想制作一个utils文件会很好( ../utils/miscUtils.js )为此:

var MiscUtils = {
    rules: {
        codeRules:[
                v => !!v || 'can't be empty',
                v => !(/\s/g.test(v)) || 'can't contain space'
            ],
        idRules:[
                v => !!v || 'can't be empty',
                v => !(/\s/g.test(v)) || 'can't contain space',
                v => (this.unitEditing.platform != "unity" || (v=="video" || v=="rewardedVideo")) || "placement for unity should only be video or rewardedVideo"
            ],
    }
}

export default MiscUtils;

这样我就可以使用:

import MiscUtils from '../utils/miscUtils'
...
data(){
        return {
                dialog: false,
                unitEditing:{},
                codeRules:MiscUtils.rules.codeRules,
                idRules:MiscUtils.rules.idRules
            }
        },

但问题是,我们指的是 this.unitEditing 在我们的检查规则中。我也试过了

idRules:MiscUtils.rules.idRules.bind(this)

上面写着 MiscUtils.rules.idRules 不是函数,因此无法绑定。

我怎样才能做到这一点?

3 回复 | 直到 6 年前

tony19 thanksd 6 年前

idRules 是一个 Array ,但你想打电话 Function#bind 在上面( 阵列 没有 bind 方法)。但是 函数#绑定 不会有帮助,因为箭头函数的上下文已经绑定 cannot be re-bound .

一个解决方案是 id规则 一个函数,它将组件实例作为参数并返回 阵列 :

var MiscUtils = {
    rules: {
        codeRules: [
                v => !!v || 'can\'t be empty',
                v => !(/\s/g.test(v)) || 'can\'t contain space'
            ],
        idRules: comp => [
                v => !!v || 'can\'t be empty',
                v => !(/\s/g.test(v)) || 'can\'t contain space',
                v => (comp.unitEditing.platform != "unity" || (v=="video" || v=="rewardedVideo")) || "placement for unity should only be video or rewardedVideo"
            ],
    }
}

然后在您的组件中:

data() {
  return {
    dialog: false,
    unitEditing: {},
    codeRules: MiscUtils.rules.codeRules,
    idRules: MiscUtils.rules.idRules(this)
  }
},

Yom T. 6 年前

idRules 是数组,不是函数;为各个规则提供上下文 this ,您需要将此misc-utils设置为工厂函数,以便您可以执行以下操作:

var MiscUtils = function () {
  return {
    rules: {
      codeRules: [
        v => !!v || "can't be empty",
        v => !(/\s/g.test(v)) || "can't contain space"
      ],
      idRules: [
        v => !!v || "can't be empty",
        v => !(/\s/g.test(v)) || "can't contain space",
        v => (this.unitEditing.platform != "unity" || (v == "video" || v == "rewardedVideo")) || "placement for unity should only be video or rewardedVideo"
      ]
    }
  }
}

在呼叫部分:

{
  data() {
    return {
      dialog: false,
      unitEditing: {},
      // Spread the individual rules
      ...MiscUtils.call(this).rules
    }
  }
}

或者,将上下文作为参数传递:

var MiscUtils = context => ({
  rules: {
    codeRules: [
      v => !!v || "can't be empty",
      v => !(/\s/g.test(v)) || "can't contain space"
    ],
    idRules: [
      v => !!v || "can't be empty",
      v => !(/\s/g.test(v)) || "can't contain space",
      v => (context.unitEditing.platform != "unity" || (v == "video" || v == "rewardedVideo")) || "placement for unity should only be video or rewardedVideo"
    ]
  }
})

BeHappy 6 年前

为什么不使用 mixins :

miscUtils.js:

export default {
    data() {
        return {
            codeRules: [v => !!v || "can't be empty", v => !/\s/g.test(v) || "can't contain space"],
            idRules: [
                v => !!v || "can't be empty",
                v => !/\s/g.test(v) || "can't contain space",
                v =>
                    this.unitEditing.platform != "unity" ||
                    v == "video" ||
                    v == "rewardedVideo" ||
                    "placement for unity should only be video or rewardedVideo"
            ]
        };
    }
};

您可以将此文件导入vue组件并设置mixins:

import miscUtils from "FILE_PATH";
export default {
    mixins: [miscUtils],
    data() {
        return {
            dialog: false,
            unitEditing: {}
        };
    },
};

现在,您可以使用您的验证和 this 请参考组件实例。