Как использовать состояние Vuex при создании пользовательской проверки с помощью Vee ​​Validate

Я пытаюсь сделать следующее:

Я хотел бы передать токен из магазина 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. $ За пределами раздела «экспорт по умолчанию». Я не определился.

Затем я хотел бы извлечь этот код в файл и импортировать компоненты, которые в нем нуждаются. Как я мог это сделать?

Я новичок в Vue.js и Vee validate, извините, если это простой вопрос.

Спасибо за ваше время и внимание.


vue.js vee-validate
person Kelvin Matheus    schedule 01.08.2018    source источник
comment
Вы можете попробовать импортировать магазин перед своим кодом в разделе <script>. import store from '@/store/index' или около того, затем используйте store.state вместо this.$store.state, это работает, по крайней мере, в файле маршрутизатора.   -  person dziraf    schedule 01.08.2018
comment
Когда пытаюсь импортировать магазин. Я получил эту ошибку Uncaught ReferenceError: хранилище не определено, когда я пытаюсь получить к нему доступ. В разделе скрипта это Module {__esModule: true, Symbol (Symbol.toStringTag): Module}. Это что-то значит для тебя?   -  person Kelvin Matheus    schedule 01.08.2018

Ответы (1)


arrow_upward
1
arrow_downward

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
    }
  };
});
person ATT    schedule 01.04.2019