aa457b54d4
When replaceSession changed the session ID from pending-XXX to a real UUID, Vue's :key="session.id" treated it as a new element, destroyed and recreated TerminalInstance, which called connectToHost again, got another UUID, replaced again — infinite loop. Added a stable `key` field to sessions that never changes after creation, used as the Vue :key instead of the mutable `id`. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
|
|
interface Session {
|
|
key: string // stable Vue key — never changes after creation
|
|
id: string // uuid from backend (starts as pending-XXX, replaced with real UUID)
|
|
hostId: number
|
|
hostName: string
|
|
protocol: 'ssh' | 'rdp'
|
|
color: string | null
|
|
active: boolean
|
|
}
|
|
|
|
export const useSessionStore = defineStore('sessions', {
|
|
state: () => ({
|
|
sessions: [] as Session[],
|
|
activeSessionId: null as string | null,
|
|
}),
|
|
getters: {
|
|
activeSession: (state) => state.sessions.find(s => s.id === state.activeSessionId),
|
|
hasSessions: (state) => state.sessions.length > 0,
|
|
},
|
|
actions: {
|
|
addSession(session: Session) {
|
|
this.sessions.push(session)
|
|
this.activeSessionId = session.id
|
|
},
|
|
removeSession(id: string) {
|
|
this.sessions = this.sessions.filter(s => s.id !== id)
|
|
if (this.activeSessionId === id) {
|
|
this.activeSessionId = this.sessions.length ? this.sessions[this.sessions.length - 1].id : null
|
|
}
|
|
},
|
|
replaceSession(oldId: string, newSession: Session) {
|
|
const idx = this.sessions.findIndex(s => s.id === oldId)
|
|
if (idx !== -1) {
|
|
// Preserve the stable key so Vue doesn't remount the component
|
|
newSession.key = this.sessions[idx].key
|
|
this.sessions[idx] = newSession
|
|
} else {
|
|
this.sessions.push(newSession)
|
|
}
|
|
this.activeSessionId = newSession.id
|
|
},
|
|
setActive(id: string) {
|
|
this.activeSessionId = id
|
|
},
|
|
},
|
|
})
|