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

我正在使用webpack，vue，vuex，vue-loader等。我不确定是否将所有设置正确。vue.js：如何从操作中访问组件数据？

// 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商店？我觉得这个数据不应该在主状态存储中，因为我真的只是使用它来将凭据传递给后端，这就是为什么我将数据本地化到组件。

任何提示/建议？

来源

2016-08-11 Drew

你在哪里抓到“LOGIN_FAILURE”事件？这可能是你会向用户显示正确信息的地方？在那里，你可以清除密码字段，如果需要，作为“登录失败”进程的一部分。为了访问父组件的属性，你可以命名子组件并使用'v-ref'指令。然后从父母你可以做这样的事情：'this。$ refs.mycomponent.logininfo.password' – crabbly

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

来源

2017-04-04 19:04:22

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

回答

相关问题