Vue表单提交后数据自动重置，如何保留原有数据？

你遇到的问题是因为表单提交触发了浏览器的默认表单提交行为，导致页面刷新，整个Vue应用重新初始化，所以组件内的数据和Vuex状态都会重置为初始值。

有三种简单的方式解决这个问题：

方式一：修改按钮类型为button #

将提交按钮的type="submit"改为type="button"，这样就不会触发表单的默认提交动作：

<button @click="register" class="btn btn-primary" type="button">register</button>

方式二：使用事件修饰符阻止默认行为 #

在点击事件上添加.prevent修饰符，直接阻止浏览器的默认提交行为：

<button @click.prevent="register" class="btn btn-primary" type="submit">register</button>

方式三：在方法内手动阻止事件 #

修改register方法，接收事件参数并调用preventDefault()：

register: function (event) {
  // 阻止表单默认提交行为
  event.preventDefault()
  
  this.axios.post("/login/", { 
    baseURL: 'http://127.0.0.1:3000', 
    usrName: this.usrName, 
    passWord: this.pass1 
  }).then((response)=>{
    console.log(response.data)
    this.$store.state.sysDecision.usrDecision = 2
  })
}

Vuex不推荐直接修改this.$store.state，建议通过定义mutation来修改状态，这样更便于调试和追踪状态变化：

1. 在store中添加mutation：

// store/index.js
export default new Vuex.Store({
  state: {
    sysDecision: {
      usrDecision: 0 // 假设初始值为0
    }
  },
  mutations: {
    SET_USR_DECISION(state, value) {
      state.sysDecision.usrDecision = value
    }
  }
})

2. 在组件中调用mutation：

this.$store.commit('SET_USR_DECISION', 2)

内容的提问来源于stack exchange，提问作者wuyu