本文就以vuex在用户登录、退出时的使用为例。
一、在 main.ts引用
二、store文件目录
三、Security.ts里面的具体内容
/** 用于保存当前用户登录状态 */
import {Commit,ActionContext} from 'vuex';
import {AuthorizedUser} from '@/domain/security';/** 此文件中定义了用户数据结构,typeScript的特色 */
interface State {
/** 当前登录用户的信息 */
authorizedUser: AuthorizedUser|null;
};
const ssKey = 'ssns.security.authorizedUser'
const userCache = sessionStorage.getItem(ssKey)
const state: State = {
authorizedUser: userCache === null ? null : JSON.parse(userCache),
}
const mutations = {
LOGIN(state: State , user: AuthorizedUser) {
state.authorizedUser = user;
sessionStorage.setItem(ssKey, JSON.stringify(user))
/** 登录时将信息写入vuex的state以及session中,这样方便无论在项目何处都可以直接拿到用户信息 */
},
LOGOUT(state: State) {
state.authorizedUser = null;
},
};
const actions = {
login(context: ActionContext<State, any> , user: AuthorizedUser) {
context.commit('LOGIN' , user);
},
logout(context: ActionContext<State, any>) {
context.commit('LOGOUT');
},
};
export default {
namespaced: true,
state,
getters,
mutations,
actions,
};
四、在具体文件中的使用
此时用户登录时的相关信息就通过vuex中的login()存到State和Session中,在其他文件中需要用到某些信息时直接取就ok了。
这是每个文件用到vuex必须引用的内容。
如果只是需要State中的值的话这样就可以了。
在需要name的地方通过this.authorizedUser.name就可以了,
是不是很方便啊?