Question

我正在使用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 = ''以清除该表单字段。但我不知道如何再次访问该组件的数据。也许我误解了一些东西，这个数据（logininfo）真的应该在vuex商店吗？我觉得这些数据不应该在主状态存储区中，因为我实际上只是使用它来将凭据传递给后端，这就是我将数据本地化到组件的原因。

任何提示/建议？

Answer 1

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

如果您不想使用commit（）来修改商店的状态，则可以从操作本身返回一个值，因为操作也会返回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>

vue.js：如何从行动中访问组件数据？

1 个答案: