Использование Vuex Store в Модале сбрасывает магазин после закрытия модального - PullRequest
Новая
       1

Использование Vuex Store в Модале сбрасывает магазин после закрытия модального

0 голосов
/ 23 февраля 2020

Я использую Nuxt 2.11 с "bootstrap - vue" 2.5.0

Я создал магазин с простым списком и мутатором, чтобы добавить элемент в этот список. 

// store/issues.js
export const state = () => ({
  list: [],
})

export const mutations = {
  add(state, issue) {
    state.list.push(issue)
  },
}

Затем я создал страницу с for-l oop для всех записей и вычисляемым свойством для загрузки данных из хранилища. 

computed: {
  issues() {
    return this.$store.state.issues.list
  },
},

Если добавить простую кнопку в явное добавление элемента, он будет добавляться каждый раз, и все работает нормально 

<b-btn @click="test">Add</b-btn>

test() {
  this.$store.commit('issues/add', {
    title: 'title',
  })
},

Но когда я использую форму bootstrap - vue для отправки новых элементов в магазин, элемент будет добавлен сначала, но через секунду весь магазин удаляется и список на моей странице становится пустым. 

<b-form @submit="onSubmit" @reset="onReset">
  ...
</b-form>


onSubmit() {
  this.$store.commit('issues/add', this.issue)
},

1 Ответ

1 голос
/ 23 февраля 2020

Если вы не хотите, чтобы страница перезагружалась при отправке формы, необходимо предотвратить отправку исходной формы: 

<b-form @submit="onSubmit" @reset="onReset">
  ...
</b-form>


onSubmit(evt) {
  evt.preventDefault()
  this.$store.commit('issues/add', this.issue)
},
...