CODEWITHSUNDEEP
vue.jsvuex
Westwick
Westwick

Reputation: 2487

vue.js: how to access component data from action?

I'm using webpack, vue, vuex, vue-loader, etc. I'm not sure if I have this all set up correctly.

// 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>

and then my action:

// 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')
  })
}

The problem I'm having is that since this form is being 'submitted' with AJAX, the form inputs stay filled in when the response comes back invalid. So I need a way to, from within the action, set logininfo.password = '' to clear that form field. But I'm not sure how to access that component's data again. Maybe I'm misunderstanding something and this data (logininfo) should really be in the vuex store? I felt like this data should not be in the main state store because I'm really just using it to pass the credentials to the backend, which is why I localized the data to the component.

Any tips/suggestions?

Upvotes: 1

Views: 3884

Answers (1)

adrian oviedo
adrian oviedo

Reputation: 684

Something important to note in your code. According to vuex docs, you can pass an additional argument to actions, which is called the payload, it is just an object containing all data you can work with.

If you don't want to use a commit() to modify the store's state, you can return a value from an action itself, because actions also returns Promises. So, you can do: (note I added the payload object)

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
  })
}

In your component: first import mapActions helper:

import {mapActions} from 'vuex'

Then in the methods object:

methods:{
clickLogin(){
 this.login({email:this.logininfo.email, password:logininfo.password}).then(logged => {
  if(!logged) logininfo.password = '';
 } )
},
...mapActions(['login']),
}

In your template:

<button @click.prevent="clickLogin()">Login</button>

Upvotes: 4

Related Questions