perf：使用 pinia 存储数据，优化请求次数

frontend/package.json

@@ -14,6 +14,7 @@
     "axios": "^1.4.0",
     "element-plus": "^2.3.9",
     "path": "^0.12.7",
+    "pinia": "^2.1.6",
     "process": "^0.11.10",
     "terser": "^5.19.2",
     "vue": "^3.3.4",

frontend/src/components/device_communication/EditDialog.vue

@@ -15,7 +15,7 @@
       </el-form-item>
       <el-form-item label="协议名称" :label-width="formLabelWidth" prop="protocol_name">
         <el-select v-model="form.protocol_name" @change="handleProtocolChange">
-          <el-option v-for="protocol_name in protocolNames" :label="protocol_name" :value="protocol_name" />
+          <el-option v-for="protocolName in store.protocolNames" :label="protocolName.label" :value="protocolName.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="通信模式" :label-width="formLabelWidth" prop="communicate_mode">
@@ -73,13 +73,15 @@
 
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import type { CheckboxValueType, ElForm } from 'element-plus';
 import { ElMessage, FormRules } from 'element-plus'
 import axios from 'axios';
 
 import { DeviceInfo } from "./types";
+import { useProtocolNamesStore } from '@/stores/protocolNames'; 
 
+const store = useProtocolNamesStore()
 const formRef = ref<typeof ElForm>()
 const dialogFormVisible = ref(false)
 const formLabelWidth = "120px"
@@ -190,19 +192,6 @@ const rules = reactive<FormRules<typeof form>>({
 
 })
 
-const protocolNames = ref<string[]>([])
-onMounted(() => {
-  axios.get('api/device_communication/')
-    .then((res) => {
-      for (let protocolName of res.data) {
-        protocolNames.value.push(protocolName.value)
-      }
-    })
-    .catch((err) => {
-      console.log(err);
-    })
-})
-
 const handleProtocolChange = (protocol_name: string) => {
   axios.get('/api/device_communication/protocol_performance/' + protocol_name + '/')
     .then((res) => {

frontend/src/main.ts

@@ -3,12 +3,15 @@ import './style.css'
 import App from './App.vue'
 
 import ElementPlus from 'element-plus'
+import { createPinia } from 'pinia'
 import 'element-plus/dist/index.css'
 import router from './router'
 import 'virtual:uno.css'
 
 
+const pinia = createPinia()
 const app = createApp(App)
+app.use(pinia)
 app.use(router)
 app.use(ElementPlus)
 app.mount('#app')

frontend/src/stores/protocolNames.ts

+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+type ProtocolName = {
+  label: string
+  value: string
+}
+
+export const useProtocolNamesStore = defineStore('protocolNames', () => {
+  const protocolNames = ref<ProtocolName[]>([])
+
+  return {
+    protocolNames
+  }
+})

frontend/src/views/DeviceCommunication.vue

@@ -40,6 +40,7 @@ import useClipboard from 'vue-clipboard3'
 import DeviceInfoCard from '@/components/device_communication/DeviceInfoCard'
 import type { DeviceInfo } from '@/components/device_communication/types'
 import EditDialog from '@/components/device_communication/EditDialog';
+import { useProtocolNamesStore }  from '@/stores/protocolNames'
 
 // tab 相关
 const activeName = ref('device')
@@ -76,6 +77,11 @@ onMounted(() => {
       console.log(err);
     })
 
+  axios.get('/api/device_communication/')
+    .then((res) => {
+      const store = useProtocolNamesStore()
+      store.protocolNames.push(...res.data)
+    })
 })
 
 type param = {

frontend/yarn.lock

@@ -2377,6 +2377,14 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pinia@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.1.6.tgz#e88959f14b61c4debd9c42d0c9944e2875cbe0fa"
+  integrity sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 pkg-types@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz#988b42ab19254c01614d13f4f65a2cfc7880f868"
@@ -2710,6 +2718,11 @@ vue-demi@*:
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
   integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
 
+vue-demi@>=0.14.5:
+  version "0.14.6"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
+  integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+
 vue-router@^4.2.4:
   version "4.2.4"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.4.tgz#382467a7e2923e6a85f015d081e1508052c191b9"