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

【问题标题】：vue.js: how to access component data from action?vue.js：如何从动作中访问组件数据？
【发布时间】：2016-12-18 19:52:05
【问题描述】：

我正在使用 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 存储中吗？我觉得这些数据不应该在主状态存储中，因为我实际上只是使用它来将凭据传递给后端，这就是我将数据本地化到组件的原因。

任何提示/建议？

【问题讨论】：

您在哪里捕捉到LOGIN_FAILURE 事件？那可能是您将向用户显示消息的地方对吗？在那里，您可以根据需要清除密码字段，作为login failure 进程的一部分。要从父组件访问组件属性，您可以命名子组件并使用 v-ref 指令。然后从父母那里你可以做这样的事情：this.$refs.mycomponent.logininfo.password

标签： vue.js vuex

【解决方案1】：

在您的代码中需要注意的重要事项。根据 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对象中：

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>

【讨论】：