Vue + ElementUI 实现后台管理系统模板 -- 前端篇：引入 vuex 进行状态管理

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
// 定义状态
const state = {
  userInfo: null,
  token: null
}
 
// 定义 mutations
const mutations = {
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
  },
  SET_TOKEN(state, token) {
    state.token = token
  }
}
 
// 定义 actions
const actions = {
  setUserInfo({ commit }, userInfo) {
    commit('SET_USER_INFO', userInfo)
  },
  setToken({ commit }, token) {
    commit('SET_TOKEN', token)
  }
}
 
// 创建 store 实例
export default new Vuex.Store({
  state,
  mutations,
  actions
})

在 main.js 中引入 store 并加到 Vue 实例中：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' // 引入 store
 
Vue.config.productionTip = false
 
new Vue({
  router,
  store, // 使用 store
  render: h => h(App)
}).$mount('#app')

现在你可以在任何组件中使用 this.$store.state.userInfo 或通过 this.$store.dispatch('setUserInfo', userInfo) 来设置用户信息了。