vuex(7)

 vuex示例：

app.ts

export interface StateProps {
   visitedViews: Array<view>
}

export interface view {
   path: string,
   name: string
}

const state = {
   visitedViews:[]
}

const getters = {

}

const mutations = {
     CLEAR_VISITED_VIEWS: (state: StateProps, view: view) => {
           state.visitedViews = [];
     }

     ADD_VISITED_VIEWS: (state:StateProps, view:view) => {
           if(state.visitedViews.some(v => v.path === view.path)) return;
           state.visitedViews.push({name: view.name, path:view.path})
    }

    DEL_VISITED_VIEWS: (state: StateProps, view:view) => {
          let index = 0;
          for(const [i, v] of state.visitedViews.entries()){
                 if(v.path === view.path){
                      index = i;
                      break;
                }
          }
          state.visitedViews.splice(index,1);
    }
}

const actions = {

}

export default {
     namespace: true,
     state,
     actions,
     mutations
}

errLog.ts

export interface StateProps {
       logs:Array<string>
}

const state = {
      logs: []
}

const getters = {

}

const mutations = {
      pushLog: (state: StateProps, log:string) => {
            state.logs.unshift(log);
      }

     clearLog: (state: StateProps) => {
        state.logs = new Array<String>();
    }
}

const actions = {

}

export default {
    namespace: true,
    state,
    actions,
    mutations
}

permission.ts

import {routes, RouteType } from '@/router/routerTypes'
import user from './user'

export interface StateProps {
    routers: Routetype[]
}

const state = {
   routers:routes
}

const getters = {
    getRouterByUserType: (state: StateProps) => {
         const sessionObject = user.state.userInfo;
         if(sessionObject = userType == "1")
             return state.routers.filter(route => !route.onlyAdmin)
         else if(sessionObject.userType == '2') return state.routers
         else return []
    }
}

const mutations = {

}

const actions = {

}

export default {
     namespace: true,
     state,
     actions,
     mutations,
     getters
}

user.ts

import { ActionContext } from 'vuex'
import storageService form '@/utils/sessionStorage'
import {basicApi} from '@api'  // 接口文件

interface UserInfo {
    username: string,
    userType: string,
    customerID: Array<number>,
    token:string
}

export interface StateProps {
     userInfo: UserInfo
}

const state = {
    userInfo: {
         username: ' ',
         userType: ' ',
         token: ' ',
         customerID: [] as Array<number>
   }
}

const getters = {
    GET_IsLoged: (state: StateProps) => {
        return state.userInfo.token != '';
   }
}

const mutations = {
    SET_UserInfo:(state: StateProps, userInfo: UserInfo) => {
       state.userInfo = userInfo;
       storageService.remove('UserInfo_orign');
       storageService.set('UserInfo_orign');
    },

    UPDATE_UserInfo: (state: StateProps) => {
      state.userInfo = storageService.get<UserInfo>('UserInfo_orign')||state.userInfo
   },

   CLEAR_UserInfo: (state:StateProps) => {
       userInfo: {
          username: ' ',
          userType: ' ',
          token: ' ',
          customerID: [] as Array<number>
       }

       storageService.remove('UserInfo_orign')
   }
}

const actions = {
    UPDATE_UserInfo_A(ctx: ActionContext<StateProps, {}>){
        ctx.commit('UPDATE_UserInfo');
    }

    CLEAR_UserInfo_A(ctx:ActionContext<StateProps, {}>){
       ctx.commit('CLEAR_UserInfo')
   }
}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}