1

我正在使用 webpack、vue、vuex、vue-loader 等。我不确定这些设置是否正确。

// login component .vue
<template>
  <form>
    <input type="email" name="email" placeholder="Email" v-model="logininfo.email">
    <input type="password" name="password" v-model="logininfo.password">
    <button @click.prevent="login(logininfo.email, logininfo.password)">Login</button>
  </form>
</template>

<script>
  import { login } from '../../vuex/actions'

  export default {
    data: function () {
      return {
        logininfo: {
          email: null,
          password: null
        }
      }
    },
    vuex: {
      actions: {
        login
      }
    }
  }
</script>

然后我的行动：

// vuex/actions.js
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export const login = ({dispatch}, email, password) => {
  dispatch('LOGIN_REQUEST')
  Vue.http.post('/login', {email, password}).then((response) => {
    dispatch('LOGIN_SUCCESS')
  }, (response) => {
    dispatch('LOGIN_FAILURE')
  })
}

我遇到的问题是，由于此表单是使用 AJAX“提交”的，因此当响应返回无效时，表单输入会保持填写状态。因此，我需要一种方法来从操作logininfo.password = ''中清除该表单字段。但我不确定如何再次访问该组件的数据。也许我误解了一些东西，这个数据（登录信息）真的应该在 vuex 存储中吗？我觉得这些数据不应该在主状态存储中，因为我实际上只是使用它来将凭据传递给后端，这就是我将数据本地化到组件的原因。

任何提示/建议？

4

1 回答 1

4

在您的代码中需要注意的重要事项。根据 vuex 文档，您可以向操作传递一个额外的参数，称为有效负载，它只是一个包含您可以使用的所有数据的对象。

如果你不想使用 commit() 来修改 store 的状态，你可以从 action 本身返回一个值，因为 action 也会返回 Promises。所以，你可以这样做：（注意我添加了有效负载对象）

export const login = ({dispatch}, {email, password}) => {
  dispatch('LOGIN_REQUEST')
  Vue.http.post('/login', {email, password}).then((response) => {
    dispatch('LOGIN_SUCCESS')
    return true
  }, (response) => {
    dispatch('LOGIN_FAILURE')
    return false
  })
}

在您的组件中：首先导入 mapActions 助手：

import {mapActions} from 'vuex'

然后在方法对象中：

methods:{
clickLogin(){
 this.login({email:this.logininfo.email, password:logininfo.password}).then(logged => {
  if(!logged) logininfo.password = '';
 } )
},
...mapActions(['login']),
}

在您的模板中：

<button @click.prevent="clickLogin()">Login</button>
于 2017-04-04T19:04:22.207 回答