如何在Vue和Vuex中正确绑定表格-v模型的差异：：value和：value.sync

Question

我对Vue＆Vuex相当陌生，不确定如何正确设置表单。

<template>
    <div>
        <div v-if="error">{{error.message}}</div>
        <form @submit.prevent>
            <h1>Register</h1>
            <input type="email" name="" id="" :value.sync="email" placeholder="Email">
            <input type="password" :value.sync="password" placeholder="Password">
            <button @click="signup">Submit</button>
            <a href="login">Sign in</a>
        </form>
    </div>
</template>

<script>
import {fireAuth} from '~/plugins/firebase.js'
export default {
  data: () => ({
    email: '',
    password: '',
    error: ''
  }),
  methods: {
    signup() {
      fireAuth.createUserWithEmailAndPassword(this.email, this.password).then(res => {
        if (res) {
          this.$store.commit('setCurrentUser', res.user)
          this.$router.push('/')
        }
      }).catch(err => {
        this.error = err
        console.log(err)
      })
    }
  }
}
</script>

起初，我尝试使用v-model绑定表格，在更改商店时会引发错误，但是我没有存储电子邮件和密码，因此不确定如何更改商店？如果我使用:value或:value.sync，则电子邮件和密码字段仍为空字符串，因此我不确定如何正确设置它们或它们与v-model的区别

编辑：根据要求从商店添加我的代码

export const state = () => ({
    currentUser: {}
})

export const mutations = {
    setCurrentUser (state, obj) {
    state.currentUser = obj
    }
}

Answer 1