VUE SignalR W/ JQuery -Projekt - SignalR -Ereignisse funktionieren nur auf manueller Aktualisierung im Dev -Server ⇐ Jquery

[Anonymous]

Ich habe ein Basar -Problem mit meinem Projekt im Zusammenhang mit den SignalR -Ereignissen und JQuery. Für den Anfang ist mein Client -Projekt mit Vue 3 (W/Komposition -API), Vite, Pinia, SignalR W/JQuery und TypeScript erstellt. Dies stammt aus der Datei von SignalRStore.ts < /code>. Wenn ich es von npm run serve ausführe, repariert die Aktualisierung nicht und der Fehler bleibt bestehen. Ich bin mir nicht sicher, ob es sich um ein Initialisierungsauftragsproblem oder ein Pinia -Statusproblem oder ein JQuery -Referenzproblem usw. handelt. Ich bin mir bewusst, dass der $ nicht definiert ist. eine Geschäft Aktion. Ich bin mir nicht sicher, ob dies der richtige Weg ist, aber es macht für mich Sinn.

Code: Select all

MyTitle

SignalRStore.ts

Code: Select all

// SignalRStore.ts
import { defineStore } from 'pinia'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const $: any

export const useSignalRStore = defineStore('SignalRStore', {
state: () => {
return {
isConnected: false,
}
},

actions: {
async setConnected(value: boolean) {
this.isConnected = value
},
async startSignalR() {
const signalRConnection = $.hubConnection({ ** backend url **})

signalRConnection.reconnecting(() => {
this.isConnected = false
console.log('SignalR Reconnecting...')
})

signalRConnection.reconnected(() => {
this.isConnected = true
console.log('SignalR Reconnected')
})

signalRConnection.disconnected(() => {
console.log('SignalR Disconnect: ' + $.hubConnection.lastError)
this.isConnected = false
})

signalRConnection.stateChanged((state: object) => {
console.log('state changed: ' + JSON.stringify(state))
this.isConnected = false
})

signalRConnection
.start({ withCredentials: false })
.done(() => {
this.isConnected = true
console.log('Now connected, connection ID=')
})
.fail(() => {
this.isConnected = false
console.log('Could not connect')
})
},
},

})

app.vue

Code: Select all

// App.vue

import { onBeforeMount } from 'vue'
import { RouterView } from 'vue-router'
import { useSignalRStore } from './stores/SignalRStore'

const signalRStore = useSignalRStore()
signalRStore.startSignalR()