Using Vuex Store in Modal resets the store after closing of modal

Question

I'm using Nuxt 2.11 with "bootstrap-vue" 2.5.0

I created a store with a simple list and a mutator to add an element to this list.

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

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

Then I created a page with a for-loop over all entries and a computed property to load the data from the store.

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

If I add a simple button to explicit add an item, it will be added everytime and everythings works fine

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

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

But when I use a bootstrap-vue-form to submit new items to the store, the item will be added at first, but after a second, the whole store is removed and the list on my page is empty.

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


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

Answer 1

If you do not want the page to reload on submit of the form, you need to prevent the native form submit from occuring:

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


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