2020-10-23

vuex中的登录操作封装

import Vue from 'vue'
import Vuex from 'vuex'
import login from './login.js'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
	  login
  }
})

export default {
	state: {
		loginState: false,
		token: null,
		userInfo: {}
	},
	mutations: {
		initUser(state) {
			let userInfo = window.localStorage.getItem('userInfo');
			if (userInfo) {
				userInfo = JSON.parse(userInfo);
				state.userInfo = userInfo;
				state.token = userInfo.token;
				state.loginState = true;
			}
		},
		login(state, userinfo) {
			state.userInfo = userinfo;
			state.token = userinfo.token;
			state.loginState = true;
			window.localStorage.setItem('userInfo', JSON.stringify(userinfo));
		},
		loginOut(state) {
			state.userInfo = {};
			state.token = null;
			state.loginState = false;
			window.localStorage.removeItem('userInfo');
		}
	},
	actions: {},
	modules: {

	}
}

vuex中方法使用mapMutations(['login'])辅助函数
vuex中state使用mapState()辅助函数，作为计算属性注入