vue.filename: 액션에서 컴포넌트 데이터에 액세스하는 방법

vue.filename: 액션에서 컴포넌트 데이터에 액세스하는 방법

웹팩, 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 스토어에 있어야 합니다.이 데이터는 메인스테이트스토어에 있으면 안 된다고 느꼈습니다.그 이유는 이 데이터를 사용하여 credential을 백엔드로 전달하고 있기 때문입니다.그 때문에 데이터를 컴포넌트에 현지화했습니다.

힌트/제안사항 있나요?

코드에 메모해야 할 중요한 사항입니다.vuex docs에 따르면 작업에 추가 인수를 전달할 수 있습니다. payload라고 합니다. 이 인수는 작업할 수 있는 모든 데이터를 포함하는 개체일 뿐입니다.

commit()를 사용하여 스토어의 상태를 수정하지 않으면 액션 자체에서 값을 반환할 수 있습니다.액션은 Promise도 반환하기 때문입니다.다음 작업을 수행할 수 있습니다(payload 오브젝트를 추가했습니다).

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>

언급URL : https://stackoverflow.com/questions/38907121/vue-js-how-to-access-component-data-from-action