vue.js - 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 ストアにあるはずですか? このデータは、バックエンドに資格情報を渡すために使用しているだけなので、メインの状態ストアに置くべきではないと感じました。そのため、データをコンポーネントにローカライズしました。

ヒント/提案はありますか？