vue.js : 작업에서 구성 요소 데이터에 액세스하는 방법?

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 docs에 따르면 페이로드라고하는 작업에 추가 인수를 전달할 수 있습니다.이 매개 변수는 작업 할 수있는 모든 데이터가 포함 된 개체 일뿐입니다.

작업의 상태를 수정하는 데 commit()을 사용하지 않으려는 경우 작업에서 약속을 반환하기 때문에 작업 자체의 값을 반환 할 수 있습니다. 구성 요소에서

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>