2

我正在尝试执行以下操作：

我想从 Vuex 商店传递一个令牌，如下所示：

<template>
  ...
  <div class="col-md-12">
    <label for="email" class="label-input">E-mail address</label>
    <input v-validate="validations.user.email" v-model="data.user.email" id="email" class="form-control" type="email" name="email" placeholder="Enter e-mail" />
    <div v-show="errors.has('email')" id="email-error" class="msg-error text-danger">{{ errors.first('email') }}</div>
  </div>
  ...
</template>

<script>
  ...
  const isUnique = (value) => {
    debugger;
    return axios.post('/api/v1/users/email_validations', { email: value, token: this.$store.state.auth.JWT }).then((response) => {
      // Notice that we return an object containing both a valid property and a data property.
      return {
        valid: response.data.valid,
        data: {
          message: response.data.message
        }
      };
    });
  };

  // The messages getter may also accept a third parameter that includes the data we returned earlier.
  Validator.extend('unique_email', {
    validate: isUnique,
    getMessage: (field, params, data) => {
      return data.message;
    }
  });
  ...

  export default {
    ...
  }
</script>

我想创建一个向 API 发送请求的自定义验证。但是，我无法访问“导出默认值”部分之外的 this.$store。我没有定义。

然后，我想将此代码提取到一个文件中并导入需要它的组件中。我怎么能那样做？

我是 Vue.js 和 Vee 验证的新手，如果这是一个简单的问题，我很抱歉。

感谢您的时间和关注。

4

1 回答 1

1

Vee-validate 不提供任何直接访问组件/实例属性的方法。因此，您无法this.$store在自定义验证器代码中访问。有多种替代方法可以实现这一目标。

首先，您可以为令牌设置一个隐藏的只读输入字段，并将其用作验证您的唯一字段的目标。查看文档以获取更多信息。

此外，您可以尝试将令牌存储为实例属性，然后在验证器代码中使用它。

在 Vue 实例中：

mounted() {
    Vue.prototype.token = this.$store.state.auth.JWT;
}

然后在您的验证器文件中：

import Vue from "vue";
...
const isUnique = (value) => {
//other code
return axios.post('/api/v1/users/email_validations', { email: value, token: Vue.prototype.token }).then((response) => {

  return {
    valid: response.data.valid,
    data: {
      message: response.data.message
    }
  };
});
于 2019-04-01T08:16:35.630 回答