2021SC@SDUSC
文章目录
- 前言
- store.js
- 引入项目
- Others
-
- 利用 Vuex 提高性能
前言
在上一次博客中,我们简单介绍了一下 Vuex 以及它的用法。在这一篇博客中,我们将实地分析 sduoj 项目中的 Vuex 的使用。
【sduoj】初识 Vuex
store.js
为了方便维护,我们为 Vuex 专门建立一个 js 文件,store.js ,将其至于 src 目录下。
在其内部,我们先将 Vue 和 Vuex 引入:
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);
接下来我们就可以编写具体的 store 了:
// 实例化一个 Vuex.Store 对象,并将其作为默认项导出
export default new Vuex.Store({
state: {
token: null, // 用户身份鉴权使用的JWTisTeacher: 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)}},
})
引入项目
现在,我们已经有了一个可以使用的 store.js 了,我们还需要将它引入到该项目中才能正式使用。
在项目的 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
利用 Vuex 提高性能
sduoj 发送 http 请求时的鉴权方式是向服务器提供一个 JWT 的字符串,该字符串会在用户登录时使用 localStorage.setItem
存储在磁盘中,每当我们希望发送 http 请求时,就需要调用 localStorage.getItem
从磁盘中将 JWT 取出。显然,如果我们每次发送请求都需要从磁盘中读取 JWT ,虽然短期看来单次操作的开支似乎很小,但其效率必定是低下的。因此我们不妨在项目启动时或是用户登录时就将 JWT 从磁盘中取出,存放在 Vuex 中。这样我们每次发送请求就只需要从 Vuex 中读取需要的数据。访问内存的效率显然比反复读取磁盘数据的性能要高。