使用vuex

npm install vuex --save
//
yarn add vuex

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

Vue.use(Vuex)

import Vue from 'vue'
import Vuex from 'vuex'
import {
	login,
	getInfo,
	logout
} from '@/api/user.js'
import {
	setToken,
	removeToken,
	getToken
} from '@/utils/auth.js'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		token: getToken(),
		user_info: ''
	},
	mutations: {
		SET_VALUE(state, payload) {
			state[payload.key] = payload.value
		}
	},
	actions: {
		login({
			commit
		}, form) {
			return new Promise((resolve, reject) => {
				login(form).then(res => {
					const {
						data
					} = res
					commit('SET_VALUE', {
						key: 'token',
						value: data.token
					})
					setToken(data.token)
					resolve()
				}).catch(err => {
					reject(err)
				})
			})
		},
		getUserInfo({
			commit,
			state
		}) {
			return new Promise((resolve,reject)=>{
				getInfo(state.token).then(res=>{
					commit('SET_VALUE', {
						key: 'user_info',
						value: res.data
					})
					resolve(res.data)
				}).catch(err=>{
					reject(err)
				})
			})
		},
		logout({commit, state}){
			return new Promise((resolve,reject)=>{
				logout(state.token).then(res=>{
					commit('SET_VALUE', {
						key: 'token',
						value: ''
					})
					commit('SET_VALUE', {
						key: 'user_info',
						value: ''
					})
					removeToken()
					resolve()
				}).catch(err=>{
					reject(err)
				})
			})
		}
	}
})

export default store

使用

import store from './store'


new Vue({
	render: h => h(App),
	store
}).$mount('#app')




import { mapActions } from 'vuex';
methods: {
...mapActions(['login', 'getUserInfo', 'logout']),
handleLogin() {
this.login({ username: 'admin' });
},
handleLoginOut() {
this.logout();
},
handleUserInfo() {
this.getUserInfo().then(res => {
console.log(res);
});
}
},