存入vuex的作用: vuex是存放公共数据的,把token存入vuex,需要带token访问的页面就可以直接调用

1.api文件夹login.js封装接口:

export function doLogin (user) {
  return request({
    url: '/v1_0/authorizations',
    method: 'POST',
    data: {
      mobile: user.mobile,
      code: user.code
    }
  })
}

2.store文件里面把token存入vuex

import Vue from 'vue'
import Vuex from 'vuex'
import { doLogin } from '@/api/login.js'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    tokenInfo: {}
  },
  mutations: {
    setTokenInfo (state, newToken) {
      state.tokenInfo = newToken
    }
  },
  actions: {
    async userLogin (context, userInfo) {
      // context.commit('mSetTokenInfo', res.data.data)
      try {
        const res = await doLogin(userInfo)
        console.log(res)
        console.log(context)
        // 请求成功之后,保存token,所以调mutations函数
        context.commit('setTokenInfo', res.data.data)
      } catch (err) {
        // console.log(err)
        throw new Error()  
      }
    }
  },
  modules: {
  }
})

3.表单提交调用vuex的代码(login.vue):

 async onSubmit () {
      // console.log(this.user)
      try {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner'
        })
        await this.$store.dispatch('userLogin', this.user)
        this.$toast.success('登陆成功')
      } catch (err) {
        // console.log('err:', err)
        this.$toast.fail('登陆失败')
      }
    }
  }

执行的顺序是这样的:

//抛出错误是因为,js文件只能打印错误,如果想用toast给用户提示,可以让它抛出错误,然后在调用它的.vue文件里面给toast提示