axios在派遣方法时候的异步

在actions中 把axios返回出来
在vue模板中的methods中.then()进行异步

模板中派遣方法

<template>
  <div class="login">
    <div class="container">
      <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4 class="panel-title">欢迎登录</h4>
            </div>
            <div class="panel-body">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="inputUsername" class="col-sm-2 control-label">用户名：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名" v-model="userName"/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword" class="col-sm-2 control-label">密码：</label>
                  <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码" v-model="passWord"/>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary" @click.prevent="login" :disabled="loading">登录{{loading? '...' : ''}}</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userName: '',
      passWord: ''
    }
  },
  methods: {
    login () {
      this.$store.dispatch('doLogin', { uname: this.userName, upass: this.passWord }).then(() => {
        this.$router.push('/productList')
      })
    }
  },
  computed: {
    loading () {
      return this.$store.state.dologin.loading
    }
  }
}
</script>

store里数据

import axios from 'axios'
const state = {
  token: null,
  loading: false
}

const actions = {
  doLogin ({ commit }, user) {
    commit('LOADING_TRUE')
    return axios.post('http://localhost:3000/api/login', user).then(response => {
      localStorage.setItem('token', response.data.token)
      commit('DO_LOGIN', response.data.token)
      commit('LOADING_FALSE')
    })
  },
  doLogout ({ commit }) {
    return new Promise((resolve) => {
      setTimeout(() => {
        localStorage.removeItem('token')
        commit('DO_LOGOUT')
        resolve()
      }, 3000)
    })
  }
}

const mutations = {
  DO_LOGIN (state, token) {
    state.token = token
  },
  LOADING_TRUE (state) {
    state.loading = true
  },
  LOADING_FALSE (state) {
    state.loading = false
  },
  DO_LOGOUT (state) {
    state.token = null
  }
}

const getters = {
  token (state) {
    return state.token
  }
}
export default {
  state,
  actions,
  mutations,
  getters
}