[sduoj] Vuex global state management

2021SC@SDUSC

foreword

In the last blog, we briefly introduced Vuex and its usage. In this blog, we will analyze the use of Vuex in the sduoj project on the spot.

【sduoj】Get to know Vuex for the first time

store.js

In order to facilitate maintenance, we specially create a js file for Vuex , store.js, and put it in the src directory.
Inside it, we first introduce Vue and Vuex :

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

Next we can write a specific store :

// 实例化一个 Vuex.Store 对象，并将其作为默认项导出
export default new Vuex.Store({
    
    
	state: {
    
    
		token: null, // 用户身份鉴权使用的JWT
		isTeacher: false,
		isAdmin: false,
		myInfo: {
    
    
			avatar: null,
			nickname: null,
            realName: null,
            stuNum: null,
            userId: undefined,
            username: null,
		},
		problemSetInfo: {
    
    
            problems: [],
            title: "",
            announcement: "",
            author: "",
            open: undefined,
            beginTime: "1970-01-01",
            endTime: "1970-01-01",
            status: 0,
            isMyProblemSet: false,
            problemIds: [],
            problemSetId: 0,
        }
	},
	mutations: {
    
    
        setToken(state, token) {
    
    
            state.token = token
        },
        setNoToken(state, noToken) {
    
    
            state.noToken = noToken;
        },
        setIsTeacher(state, isTeacher) {
    
    
            state.isTeacher = isTeacher;
        },
        setIsAdmin(state, isAdmin) {
    
    
            state.isAdmin = isAdmin;
            state.isTeacher = isAdmin;
        },
        setMyInfo(state, myInfo) {
    
    
            for (const key in myInfo) {
    
    
                Vue.set(state.myInfo, key, myInfo[key])
            }
        },
        setProblemSetInfo(state, newInfo) {
    
    
            for (const key in newInfo) {
    
    
                Vue.set(state.problemSetInfo, key, newInfo[key])
            }
        },
    },
    actions: {
    
    
        setToken(context, token) {
    
    
            context.commit('setToken', token);
        },
        setNoToken(context, noToken) {
    
    
            context.commit('setNoToken', noToken);
        },
        setIsTeacher(context, isTeacher) {
    
    
            context.commit('setIsTeacher', isTeacher);
        },
        setIsAdmin(context, isAdmin) {
    
    
            context.commit('setIsAdmin', isAdmin);
        },
        setMyInfo(context, myInfo) {
    
    
            context.commit('setMyInfo', myInfo);
        },
        setProblemSetInfo(context, newInfo) {
    
    
            context.commit('setProblemSetInfo', newInfo);
        },
    },
    getters: {
    
    
        usernameToShow: (state) => {
    
    
            return state.myInfo.nickname ? state.myInfo.nickname : (state.myInfo.realName ? state.myInfo.realName : state.myInfo.username)
        }
    },
})

import project

Now that we have a store.js that can be used, we need to import it into the project before it can be used officially.
In the project's main.js :

/*
 * src/main.js
 */

import Vue from 'vue'
import App from './App.vue'
import store from './store';

new Vue({
    
    
    store,
    render: h => h(App)
}).$mount('#app')

Others

Improve performance with Vuex

The authentication method when sduoj sends http requests is to provide a JWT string to the server, which will be used localStorage.setItemand stored Whenever we want to send an http request, we need to call localStorage.getItemthe JWT from the disk take out. Obviously, if we need to read JWT from disk every time we send a request, although the overhead of a single operation seems small in the short term, its efficiency must be low. So we might as well take the JWT out of the disk and store it in Vuex when the project starts or when the user logs in. In this way, we only need to read the required data from Vuex every time we send a request. The efficiency of accessing memory is obviously higher than the performance of repeatedly reading disk data.