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：如何從操作中訪問組件數據？

回答

相關問題