2021SC@SDUSC
記事ディレクトリ
序文
前回のブログでは、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, // 用户身份鉴权使用的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)
}
},
})
プロジェクトのインポート
これで使用できる 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')
その他
Vuex でパフォーマンスを改善する
sduoj がhttp リクエストを送信するときの認証方法は、JWT 文字列をサーバーに提供することです。これは、ユーザーのログイン時に使用されlocalStorage.setItem、ディスクに保存されlocalStorage.getItem、ディスクを取り出します。明らかに、リクエストを送信するたびにディスクから JWT を読み取る必要がある場合、1 回の操作のオーバーヘッドは短期的には小さいように見えますが、その効率は低いに違いありません。したがって、JWT をディスクから取り出して、プロジェクトの開始時またはユーザーのログイン時に Vuex に保存することもできます。このようにして、リクエストを送信するたびに必要なデータを Vuex から読み取るだけで済みます。メモリにアクセスする効率は、ディスク データを繰り返し読み取るパフォーマンスよりも明らかに高くなります。