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

Posted 2023-02-22

【中文标题】在 Modal 中使用 Vuex Store 会在模态关闭后重置 store

【英文标题】：Using Vuex Store in Modal resets the store after closing of modal

【发布时间】：2020-06-06 23:42:44

【问题描述】：

我正在使用 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)
,

【参考方案1】：

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

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


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

【讨论】：

我删除了preventDefault，因为我希望模式在提交后关闭。我忘了我必须用this.$bvModal.hide() 关闭模式。现在可以了！