<script setup>
import InputChat from '../components/InputChat.vue'
import Chat from '../components/Chat.vue'
import Layout from "@/components/Layout.vue";
import Sidebar from "@/components/Sidebar.vue";
import ChatVue from '@/components/Chat.vue';
import { ChatManager } from '../../lib/ChatManager';
import { ref, watch } from 'vue';
const manager = new ChatManager()
const historys = ref(manager.historys)
watch( historys ,(newHistory)=>{
console.info("Watch execute");
console.info(newHistory)
console.info(historys.value);
},{deep:true})
const handleSentMessage = (value)=>{
console.info(value + "Parent receive yet");
manager.sentChat(value)
}
</script>
<template>
<Layout>
<template #sidebar>
<Sidebar />
</template>
<template #chat>
<Chat :history = "manager.history"/>
</template>
<template #input-chat>
<InputChat @sent-message = "handleSentMessage"/>
</template>
</Layout>
</template>
export class ChatManager {
constructor() {
this.url = import.meta.env.VITE_API_URL || 'http://localhost:11434/api'
this.historys = [];
}
async sentChat(message){
const messageTemplate = {
request:{
role:"user",
content: ''
},
response:{
role:'assistant',
content:''
}
}
try {
messageTemplate.request.content = message
this.historys.push(messageTemplate)
const response = await fetch(`${this.url}/chat`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "llama2",
messages: [
{
role: "user",
content: message
}
],
stream: false
})
});
const data = await response.json();
console.info(data)
this.historys[this.historys.length-1].response.content = data.message.content
this.historys[this.historys.length-1].response.role = data.message.role
return data;
}
catch(error){
console.info(error);
}
}
}
Когда история меняется, почему часы не выполняются, я хочу, чтобы при изменении истории выполнялось наблюдение, но теперь, когда история меняется, наблюдение не выполняется, пожалуйста, помогите мне
возможно, попробуй вызвать вот так watch(()=> historys.value
Вы можете обратиться к официальной документации vue3 за описанием и использованием Deep Watcher.
Используйте «реактивный» вместо «ref»
Это ни на что не отвечает
Ваш ответ можно улучшить, добавив дополнительную вспомогательную информацию. Пожалуйста, отредактируйте , добавив дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.
ChatManager
относится к нереактивному historys
массиву, за которым невозможно наблюдать.
Класс должен либо явно использовать reactive
для полей, либо его можно сделать реактивным при создании экземпляра:
const manager = reactive(new ChatManager())
const historys = toRef(manager, 'historys')
watch(historys, ...)
У реактивных классов есть несколько ловушек, которые требуют их ограниченной реализации, совместимой с реактивностью Vue. Ни один из них пока не применим к ChatManager
.
Возможно, я упускаю из виду очевидное... но...
manager.history
что это? Я вижу, что такоеmanager.historys
... ноmanager.history
остается загадочным