在 Modal 中使用 Vuex Store 会在模态关闭后重置 store

Question

我正在使用 Nuxt 2.11 和“bootstrap-vue”2.5.0

我创建了一个商店，其中包含一个简单的列表和一个用于向该列表添加元素的 mutator。

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

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

然后我创建了一个页面，其中包含所有条目的 for 循环和一个计算属性以从商店加载数据。

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-form 向商店提交新商品时，首先会添加该商品，但一秒钟后，整个商店被删除，我页面上的列表为空。

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


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

Answer 1

如果您不希望页面在提交表单时重新加载，则需要防止发生原生表单提交：

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


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