springboot+vue+mybatisplus项目实战-学生成绩管理系统16

store

actions.js

//vuex的异步调用方法

export default {

    //保存用户
    setUserInfo(context,params){
        context.commit('SET_USER_INFO',params);
    },
    //新增页签tab
    addTab(context,tab){
        context.commit('ADD_TAB',tab);
    },
    //关闭页签tab
    closeTab(context,tabName){
        context.commit('CLOSE_TAB',tabName);
    },
    //保存学生列表
    setStudentList(context,studentList){
        context.commit('SET_STUDENT_LIST',studentList);
    },
    //获取学生列表
    getStudentList(context){
        context.commit('GET_STUDENT_LIST');
    },
    //清除一切
    clearAll(context){
        context.commit('CLEAR_USER_INFO');
        context.commit('CLEAR_TAB');
    }
}

getters.js

//getters其实就是对state数据的加工再处理，类似computed
export default {
    //常规写法，函数方式
    //获取用户信息
    userInfo(state){
        // let userInfo = state.userInfo;
        // if(!userInfo) {
        //     userInfo = window.localStorage.getItem('access-user');
        // }
        return state.userInfo;
    },
    //简化写法，获取已打开的页签tab
    openedTabs: state => state.openedTabs,
    //获取学生列表
    studentList: state => state.studentList,
}

index.js

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex
import state from './state' // 分别引入 state,getters,mutations,action1
import getters from './getters'
import mutations from './mutations'
import actions from './actions1'

Vue.use(Vuex)

export default new Vuex.Store({
  // state: {
  // },
  // getters: {
  // },
  // mutations: {
  // },
  // actions: {
  // },
  // modules: {
  // }
  //注册加入
  state,
  getters,
  mutations,
  actions,
})

mutations.js

import {saveItem, removeItem,clearAll} from '@/storage'
import {USER_TOKEN_KEY,USER_TABS_KEY} from '@/config/Constants'
import {doGet} from '@/network/request'

export default {
    //保存user
    SET_USER_INFO(state,data){
        state.userInfo = data;
        //window.localStorage.setItem('access-user',JSON.stringify(data));
        saveItem(USER_TOKEN_KEY,data.token);
    },
    //清除用户
    CLEAR_USER_INFO(state) {
        state.userInfo = '';
        clearAll();
    },
    //新增tab
    ADD_TAB(state,data){
        //判断state中是否已存在tab
        let exist = state.openedTabs.some(obj => obj.path === data.path);
        if(!exist){
            //不存在
            state.openedTabs.push(data);
        }
        saveItem(USER_TABS_KEY,state.openedTabs);
    },
    //关闭tab
    CLOSE_TAB(state,tabName){
        //过滤
        state.openedTabs = state.openedTabs.filter(item => item.path !== tabName);
        removeItem(USER_TABS_KEY);
        saveItem(USER_TABS_KEY,state.openedTabs);
    },
    //清除tab
    CLEAR_TAB(state){
        state.openedTabs = [];
        removeItem(USER_TABS_KEY);
    },
    //保存学生列表
    SET_STUDENT_LIST(state,data){
        state.studentList = data;
    },
    //获取学生列表
    GET_STUDENT_LIST(state){
        if(state.studentList <= 0){
            doGet({
                url:'/student/findAll'
            }).then(res=>{
                state.studentList = res.data;
            })
        }
    }
}

state.js

import {getItem} from "@/storage";
import {USER_INFO_KEY, USER_TABS_KEY} from "@/config/Constants";

const state = {
    //修复bug
    userInfo: getItem(USER_INFO_KEY) ? JSON.parse(getItem(USER_INFO_KEY)) : { id: -1,userName: ''},
    //打开的tabs数组
    openedTabs: getItem(USER_TABS_KEY) ? JSON.parse(getItem(USER_TABS_KEY)) : [
        {
            //当前tab对应的router路径
            path: '/index',
            //tab的标题
            text: '首页',
            //当前tab对应的router的全路径，包含参数
            fullPath: '/index'
        }
    ],
    //学生列表
    studentList:[]
};

export default state