Vuex отображать сообщение об ошибке (и сбрасывать) при перенаправлении навигации навигации - PullRequest
Новая
       15

Vuex отображать сообщение об ошибке (и сбрасывать) при перенаправлении навигации навигации

0 голосов
/ 14 марта 2019

В моем Vue Router я использую глобальную навигационную охрану , чтобы проверить, требуется ли строка запроса (to.meta.query) для запрошенного маршрута - если ничего не указано или значение равно нулю, перенаправить на родительский компонент и отправить ошибку . 

router.beforeEach((to, from, next) => {
  if(to.meta.query) {
    let query = to.query;
    let exists = Object.keys(query).filter(function (key) {
      return query[key] !== null && query[key] !== ''
    })
    if (to.meta.query && exists.length < 1) {
        let error = {
          to: to.name,
          type: "query"
        }
        store.commit('redirectError', error);
        next({ name: 'Search', replace:true})
    }
  }
  next()
})

В родительский компонент «Поиск» я включил компонент ошибки, который вычисляет сообщение об ошибке на основе «до»и «тип» объекта ошибки, извлеченного из хранилища: 

computed: {
  error: function () {
    if (!isEmpty(this.$store.state.error)) {
      this.errorTo = this.$store.state.error.to;
      this.errorMessage = this.calcErrorMessage();

      this.$store.commit('dispatchError', null);
      return true;
    }
    return false;
  }
},

и затем отображение самой ошибки с использованием v-модели ; 

<b-alert variant="danger" dismissible v-model="error">
  {{errorMessage}}
</b-alert>

Как можноЯ достигаю error, будучи "реактивным".Поэтому, когда я изменяю маршрут на другой дочерний компонент, ошибка исчезает?Моя структура компонентов: 

Search: (parent)
  -SearchForm
  -SearchResult
  -SearchDetail

Редактировать:

Поместить все в собственную ошибку. Компонент

Ответы [ 2 ]

1 голос
/ 14 марта 2019

Вы должны сбросить ошибку на вашем компоненте ошибки 

created () {
 this.error = store.state.error;
 this.errorTo = store.state.redirectError.to;
 this.errorMessage = this.calcErrorMessage();

 //reset error
 store.commit('redirectError', null)
},

и, возможно, также сбросить на охрану 

router.beforeEach((to, from, next) => {
 if(to.meta.query) {
  let query = to.query;
  let exists = Object.keys(query).filter(function (key) {
    return query[key] !== null && query[key] !== ''
  })
  if (to.meta.query && exists.length < 1) {
    let error = {
      to: to.name,
      type: "query"
    }
    store.commit('redirectError', error);
    next({ name: 'Search', replace:true})
  }
 }
 // reset error
 store.commit('redirectError', error);
 next()
})
0 голосов
/ 27 марта 2019

Ошибка компонента

В моем случае, если параметры запроса определенного маршрута отсутствуют (если для meta.query задано значение true), объект ошибки будет сохранен в store; 

router.beforeEach((to, from, next) => {
 if(to.meta.query) {
  let query = to.query;
  let exists = Object.keys(query).filter(function (key) {
    return query[key] !== null && query[key] !== ''
  })
    if ((to.meta.query && exists.length < Object.keys(query).length) || (exists < 1)) {
       let error = {
         to: to.name,
         type: "query"
       }
       store.commit('dispatchError', error);
       next({ name: 'Search', replace:true})
   }
 } 
 next()
})

Все еще используя Vuex Я поместил все в отдельный компонент ошибки; 

computed: {
  error: function () {
    if (!isEmpty(this.$store.state.error)) {
      this.errorTo = this.$store.state.error.to;
      this.errorMessage = this.calcErrorMessage();

      this.$store.commit('dispatchError', null);
      return true;
    }
    return false;
  }
},

В вычисляемой компоненте функции я проверяю, была ли отправлена ​​ошибка - после прочтения она будет сброшена (для улучшения это также можно сделать с помощью геттеров Vuex). calcErrorMessage возвращает текст ошибки на основе содержимого объекта ошибки в хранилище.

Если вы знаете какие-либо улучшения этого метода, я был бы очень благодарен

...