计算属性返回函数数组时this作用域丢失，Vuetify rules绑定Vuex getter异常

问题原因 #

你遇到的作用域异常完全是箭头函数的this绑定特性导致的，分为两层问题：

1. Vue的computed、methods等选项属性不要用箭头函数定义：箭头函数不会创建自己的this，会继承外层作用域的this，此时this不会指向当前Vue实例，自然无法访问挂载在实例上的Vuex getter、本地计算属性等内容。
2. 规则函数是后续被Vuetify异步调用的，直接在规则函数内访问this，执行时的上下文不一定是Vue实例，无法保证稳定读取实例属性。

修复方法 #

调整计算属性的写法，提前在计算属性执行时保存Vue实例的引用，规则函数通过闭包引用该实例即可：

new Vue({
  el: '#app',
  methods: {
    run() {
      this.aLocalComputedProperty.forEach(func => {
        console.log(func());
      });
    }
  },
  computed: {
    // 不要用箭头函数定义Vue选项属性
    mappedGetterFromVuex() {
      return true
    },
    // 计算属性改用普通函数，this指向当前Vue实例
    aLocalComputedProperty() {
      // 提前保存实例引用，规则函数通过闭包访问
      const vm = this
      return [
        () => "first rule is fine",
        () => {
          if (!vm.mappedGetterFromVuex) {
            console.log("vm.mappedGetterFromVuex is undefined");
            return null;
          }
          return vm.mappedGetterFromVuex;
        }
      ]
    }
  }
})

实际和Vuetify TextField结合的写法 #

规则函数会接收当前输入框的值作为参数，你可以直接读取Vuex getter的实时值做动态校验：

computed: {
  // 假设你已经用mapGetters映射了Vuex的maxAllowedAmount getter
  ...mapGetters(['maxAllowedAmount']),
  inputRules() {
    const vm = this
    return [
      v => !!v || '输入不能为空',
      v => v <= vm.maxAllowedAmount || `输入值不能超过${vm.maxAllowedAmount}`
    ]
  }
}

模板中直接绑定即可，Vuex getter更新时计算属性会自动刷新，校验规则也会同步生效：

<v-text-field
  v-model="inputValue"
  :rules="inputRules"
  label="测试输入"
/>

内容的提问来源于stack exchange，提问作者Question3r