vuex在vue2.x+typeSript中的使用

本文就以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就可以了，

是不是很方便啊？