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

Question

我有多个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/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不是一个函数，所以不能绑定。

我如何才能做到这一点？

Answer 1

idRules是一个Array，但您试图对其调用Function#bind (Array没有bind方法)。但是Function#bind不会有帮助，因为箭头函数的上下文已经绑定并且是cannot be re-bound。

一种解决方案是使idRules成为一个函数，该函数接受组件实例作为参数并返回Array

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)
  }
},

Answer 2

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"
    ]
  }
})

Answer 3

为什么不使用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组件中导入此文件并设置混合：

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

现在你可以使用你的验证和this引用组件实例了。