封装测试

src/components/Test.vue

@@ -4,32 +4,42 @@
       <p class="title">加液蠕动泵</p>
       <p class="num">000/000</p>
       <div class="btn_wrap">
-        <div class="open">打开</div>
-        <div class="close">关闭</div>
+        <div :class="testStore.feedingPeristalticPumpStatus ? 'close' : 'open'">
+          打开
+        </div>
+        <div
+          :class="!testStore.feedingPeristalticPumpStatus ? 'close' : 'open'"
+        >
+          关闭
+        </div>
       </div>
     </div>
     <div class="common_set switch_wrap">
       <p class="title">喷液蠕动泵</p>
       <p class="num">000/000</p>
       <div class="btn_wrap">
-        <div class="open">打开</div>
-        <div class="close">关闭</div>
+        <div :class="testStore.sprayPeristalticPump ? 'close' : 'open'">
+          打开
+        </div>
+        <div :class="!testStore.sprayPeristalticPump ? 'close' : 'open'">
+          关闭
+        </div>
       </div>
     </div>
     <div class="common_set switch_wrap">
       <p class="title">空压机</p>
       <p class="num">000/000</p>
       <div class="btn_wrap">
-        <div class="open">打开</div>
-        <div class="close">关闭</div>
+        <div :class="testStore.airCompressor ? 'close' : 'open'">打开</div>
+        <div :class="!testStore.airCompressor ? 'close' : 'open'">关闭</div>
       </div>
     </div>
     <div class="common_set switch_wrap">
       <p class="title">风机</p>
       <p class="num">000/000</p>
       <div class="btn_wrap">
-        <div class="open">打开</div>
-        <div class="close">关闭</div>
+        <div :class="testStore.draughtFan ? 'close' : 'open'">打开</div>
+        <div :class="!testStore.draughtFan ? 'close' : 'open'">关闭</div>
       </div>
     </div>
     <div class="common_set update_wrap">
@@ -63,7 +73,12 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import { useTestStore } from '@/store'
+
+const testStore = useTestStore()
+</script>
 
 <style lang="scss" scoped>
 .test_container {

src/store/index.js

@@ -1,6 +1,6 @@
 import { createPinia } from 'pinia'
-import { useCountStore } from './modules/count'
+import { useTestStore } from './modules/test'
 const store = createPinia()
 
 export default store
-export { useCountStore }
+export { useTestStore }

src/store/modules/count.js

@@ -1,27 +0,0 @@
-import { defineStore } from 'pinia'
-export const useCountStore = defineStore({
-  id: 'count', // id必填，且需要唯一
-  // state
-  state: () => {
-    return {
-      count: 0,
-    }
-  },
-  // getters
-  getters: {
-    doubleCount: state => {
-      return state.count * 2
-    },
-  },
-  // actions
-  actions: {
-    // actions 同样支持异步写法
-    countAdd() {
-      // 可以通过 this 访问 state 中的内容
-      this.count++
-    },
-    countReduce() {
-      this.count--
-    },
-  },
-})

src/store/modules/test.js

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+export const useTestStore = defineStore({
+  id: 'test', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      // 加液蠕动泵开关
+      feedingPeristalticPumpStatus: true,
+      // 喷液蠕动泵开关
+      sprayPeristalticPump: false,
+      // 空压机开关
+      airCompressor: false,
+      // 风机开关
+      draughtFan: false,
+    }
+  },
+  // actions
+  actions: {},
+})