Vuex+Axios登录验证与状态管理示例

vuex 配 axios 的登录验证真的是前端项目里的老搭档了。状态集中管理、求拦截一把抓，响应也快，代码也清晰。

axios的异步求配合vuex的状态管理，用来做登录验证和保存登录状态，还挺顺手。你只要装好依赖，配好main.js，基本就能跑起来。别担心复杂流程，照着撸就行。

安装命令简单：

npm i -s axios
npm i -s vuex

在main.js里配置全局axios和vuex。其实没啥套路，就是初始化一下：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
Vue.prototype.$http = axios

接下来是重点——vuex 里写登录逻辑。比如：

const store = new Vuex.Store({
  state: {
    isLogin: false
  },
  mutations: {
    login(state) {
      state.isLogin = true
    },
    logout(state) {
      state.isLogin = false
    }
  },
  actions: {
    doLogin({ commit }, payload) {
      return axios.post('/api/login', payload).then(() => {
        commit('login')
      })
    }
  }
})

你看，登录成功之后就用commit('login')更新状态，之后所有组件都能通过mapState拿到isLogin，不用一个个传参，蛮省事的。

记得做个持久化，可以用localStorage或者封装一下vuex-persistedstate，防止刷新后状态丢失。

如果你正好在搞登录流程，又想前后端分离、状态同步，试试这种vuex + axios组合，真不赖。