Question

问题是，当我将：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;
    },
  },
};

Answer 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',
  ]),
},

绑定后，Vuex状态将[object Object]插入输入

1 个答案: