:add wss send

src/pages/login/index.vue

@@ -1,13 +1,27 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import Header from '@/components/Header/index.vue'
 import commuse from './components/commuse.vue'
-import { useWebSocket } from '@vueuse/core'
+import { Message } from '@arco-design/web-vue'
+import { useAppStore, useUserStore } from '@/store'
+const appStore = useAppStore()
 
 var wss = ref('')
-
 function login() {
-  const { status, data, send, open, close } = useWebSocket(wss.value)
+  if (wss.value) {
+    appStore.socketConnect(wss.value)
+  } else {
+    Message.error(`地址不正确`)
+  }
+}
+
+function send() {
+  const send_msg = {
+    type: 'CMD',
+    data: 'g',
+  }
+  const send_msg_str = JSON.stringify(send_msg)
+  appStore.socketSend(send_msg_str)
 }
 </script>
 <template>
@@ -25,12 +39,15 @@ function login() {
     <div>
       <div class="commuse-item">
         <div class="text-slate-900 dark:text-slate-100"> wss: </div>
-        <n-input v-model:value="wss" clearable placeholder="请从控制台获取" />
+        <a-input v-model="wss" clearable placeholder="请从控制台获取" />
       </div>
       <div class="title">
-        <n-button type="tertiary" @click="login"> 登录 </n-button>
+        <a-button type="outline" @click="login"> 登录 </a-button>
       </div>
     </div>
+    <div>
+      <a-button type="outline" @click="send"> send </a-button>
+    </div>
   </div>
 </template>
 <style lang="less" scoped>

src/store/modules/app/index.ts

@@ -1,42 +1,58 @@
 import { defineStore } from 'pinia'
 import piniaStore from '@/store/index'
 import { AppState } from './types';
+import { useWebSocket } from '@vueuse/core'
+import { watch } from 'vue'
 
 export const useAppStore = defineStore(
-    // 唯一ID
+  // 唯一ID
-    'app',
+  'app',
-    {
+  {
-        state: () => ({
+    state: () => ({
-            title: "FastVue3,一个快速开箱即用的Vue3+Vite模板",
+      title: "FastVue3,一个快速开箱即用的Vue3+Vite模板",
-            h1: 'Vue3+Vite2.x+Ts+Pinia大厂开发必备',
+      h1: 'Vue3+Vite2.x+Ts+Pinia大厂开发必备',
-            theme: 'dark'
+      theme: 'dark',
-        }),
+      send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean | undefined) => { }
-        getters: {},
+    }),
-        actions: {
+    getters: {},
-            // Update app settings
+    actions: {
-            updateSettings(partial: Partial<AppState>) {
+      // Update app settings
-                // @ts-ignore-next-line
+      updateSettings(partial: Partial<AppState>) {
-                this.$patch(partial);
+        // @ts-ignore-next-line
-            },
+        this.$patch(partial);
+      },
 
-            // Change theme color
+      // Change theme color
-            toggleTheme(dark: boolean) {
+      toggleTheme(dark: boolean) {
-                if (dark) {
+        if (dark) {
-                    this.theme = 'dark';
+          this.theme = 'dark';
-                    document.documentElement.classList.add('dark');
+          document.documentElement.classList.add('dark');
-                    document.body.setAttribute('arco-theme', 'dark');
+          document.body.setAttribute('arco-theme', 'dark');
-                    localStorage.setItem('theme',this.theme)
+          localStorage.setItem('theme', this.theme)
-                } else {
+        } else {
-                    this.theme = 'light';
+          this.theme = 'light';
-                    document.documentElement.classList.remove('dark');
+          document.documentElement.classList.remove('dark');
-                    document.body.removeAttribute('arco-theme');
+          document.body.removeAttribute('arco-theme');
-                    localStorage.setItem('theme',this.theme)
+          localStorage.setItem('theme', this.theme)
-                }
-            },
         }
+      },
+      socketConnect(wss: string) {
+        const { status, data, send, open, close } = useWebSocket(wss)
+        watch(
+          data,
+          (v) => {
+            console.log(v);
+          }
+        )
+        this.send = send
+      },
+      socketSend(str: string) {
+        this.send(str)
+      }
     }
+  }
 )
 
 export function useAppOutsideStore() {
-    return useAppStore(piniaStore)
+  return useAppStore(piniaStore)
 }