在模态中使用Vuex商店会在模态关闭后重置商店

Question

我正在将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循环，并具有一个计算属性以从存储中加载数据。

computed: {
  issues() {
    return this.$store.state.issues.list
  },
},
如果我添加一个简单的按钮来显式添加项目，则每次都会添加它，并且一切正常。

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

test() {
  this.$store.commit('issues/add', {
    title: 'title',
  })
},
但是，当我使用boots-vue-form表单将新商品提交到商店时，将首先添加商品，但过一秒钟之后，整个商店将被删除，我页面上的列表为空。

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


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

我将Nuxt 2.11与“ bootstrap-vue” 2.5.0结合使用，我创建了一个商店，其中包含一个简单的列表和一个变量器，用于向该列表中添加元素。 // store / issues.js export const state =（）=>（{list：[]，}）...

Answer 1

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