title: vue.js: how to access component data from action?
body: <p>I'm using webpack, vue, vuex, vue-loader, etc. I'm not sure if I have this all set up correctly.</p>
  
  <pre><code>// login component .vue
  &lt;template&gt;
    &lt;form&gt;
      &lt;input type="email" name="email" placeholder="Email" v-model="logininfo.email"&gt;
      &lt;input type="password" name="password" v-model="logininfo.password"&gt;
      &lt;button @click.prevent="login(logininfo.email, logininfo.password)"&gt;Login&lt;/button&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import { login } from '../../vuex/actions'
  
    export default {
      data: function () {
        return {
          logininfo: {
            email: null,
            password: null
          }
        }
      },
      vuex: {
        actions: {
          login
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>and then my action:</p>
  
  <pre><code>// vuex/actions.js
  import Vue from 'vue'
  import VueResource from 'vue-resource'
  
  Vue.use(VueResource)
  
  export const login = ({dispatch}, email, password) =&gt; {
    dispatch('LOGIN_REQUEST')
    Vue.http.post('/login', {email, password}).then((response) =&gt; {
      dispatch('LOGIN_SUCCESS')
    }, (response) =&gt; {
      dispatch('LOGIN_FAILURE')
    })
  }
  </code></pre>
  
  <p>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 <code>logininfo.password = ''</code> 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.</p>
  
  <p>Any tips/suggestions?</p>