Vuex状态在绑定时将[object Object]插入输入答案

【问题标题】：Vuex state inserts [object Object] into input when bindedVuex状态在绑定时将[object Object]插入输入
【发布时间】：2023-03-19 09:40:02
【问题描述】：

问题在于，当我将 :value 绑定到 Vuex 的输入并为方法说 @input 时，Vuex 会导致输入自动成为一个对象。当我声明它应该是通过 += 输入对象的数据时，不考虑删除并变得混乱。

我在我的 Vuex 中使用了一个模块。下面首先是我的注册模板。

<template>
  <div class="register-container container">
    <div class="auth-form">
      <div class="form container">
        <div class="title">Sign up to Site</div>
        <div class="form">
          <div class="input el-input">
            <input type="text" placeholder="Email" :value="registrationEmail" @input="setRegistrationEmail" class="el-input__inner">
          </div>
          <div class="input el-input">
            <input type="text" placeholder="Username" :value="registrationUsername" @input="setRegistrationUsername" class="el-input__inner">
          </div>
          <div class="input el-input">
            <input type="password" placeholder="Password" :value="registrationPassword"  @input="setRegistrationPassword" class="el-input__inner">
          </div>
          <div class="input el-input">
            <input type="password" placeholder="Confirm Password" v-model="confirm_password" class="el-input__inner">
          </div>
          <div class="submit btn-pill"><span class="content" @click="register">Sign Up</span></div>
        </div>
        <a href="/login" class="link signup">Have an account? <span class="blue">Log in!</span></a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  data() {
    return {
      confirm_password: '',
    };
  },

  methods: {
    ...mapMutations('authentication', [
      'setRegistrationEmail',
      'setRegistrationPassword',
      'setRegistrationUsername',
    ]),
    ...mapActions('authentication', [
      'register',
    ]),
  },
  computed: {
    ...mapState('authentication', [
      'registrationEmail',
      'registrationPassword',
      'registrationUsername',
    ]),
  },
};
</script>

这里是mdoule：

import HTTP from '../http';

export default {
  namespaced: true,
  state: {
    registrationEmail: null,
    registrationPassword: null,
    registrationUsername: null,
  },
  actions: {
    register({ state }) {
      return HTTP().post('/api/auth/register', {
        email: state.registrationEmail,
        username: state.registrationUsername,
        password: state.registrationPassword,
      });
    },
  },
  mutations: {
    setRegistrationEmail(state, email) {
      console.log(email);
      state.registrationEmail = email;
    },

    setRegistrationPassword(state, password) {
      state.registrationPassword = password;
    },
    setRegistrationUsername(state, username) {
      state.registrationUsername = username;
    },
  },
};

【问题讨论】：

你检查过console.log(email);打印正确吗？

标签： vuejs2 vuex

【解决方案1】：

你需要做这样的事情，link

从方法调用setRegistrationEmail，而不是直接调用它。

<input type="text" :value="registrationEmail"  @change="setEmail" class="el-input__inner">

内部方法

methods: {
   setEmail(e) {
        this.setRegistrationEmail(e.target.value)
    },
  ...mapMutations('authentication', [
   'setRegistrationEmail',
   'setRegistrationPassword',
   'setRegistrationUsername',
  ]),
  ...mapActions('authentication', [
   'register',
  ]),
},

【讨论】：

谢谢。我还发现使用 this.$store.dispatch 或 commit 比解构对象更好，因为它提供了更简洁的代码。