RXDB-Update-Vorgänge fehlschlagen mit "Proxy muss den gleichen Wert für die nicht geschriebene, nicht konfigurierbare Ei ⇐ JavaScript

[Anonymous]

Ich versuche, RXDB zu erhalten, damit ich Elemente in eine Datenbank einfügen, sie reaktiv mit Vue zeigen und ihre Werte basierend auf Benutzereingaben aus dem Browser aktualisieren können. Es scheint ein ziemlich typischer Anwendungsfall zu sein, aber ich kann es nicht herausfinden. < /P>

Code: Select all

content is here
{{currentState}}








import { onMounted, ref, toRaw } from 'vue';

import { createRxDatabase, removeRxDatabase } from 'rxdb';
import { getRxStorageLocalstorage } from 'rxdb/plugins/storage-localstorage';

import { RxDBDevModePlugin } from 'rxdb/plugins/dev-mode';
import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
import { addRxPlugin } from 'rxdb/plugins/core';

import { wrappedValidateAjvStorage } from 'rxdb/plugins/validate-ajv';

addRxPlugin(RxDBDevModePlugin);
addRxPlugin(RxDBUpdatePlugin);

const dbHandle = ref();
const currentState = ref();

onMounted(async function () {
console.log("mount");
const storage = wrappedValidateAjvStorage({ storage: getRxStorageLocalstorage(), });
removeRxDatabase('myDB', storage);

let db = await createRxDatabase({
name: 'myDB',
storage: storage,
multiInstance: true,
eventReduce: true,
});

await db.addCollections({
state: {
schema: {
title: 'state schema',
version: 0,
primaryKey: 'name',
type: 'object',
properties: {
name: {
type: 'string',
maxLength: 100,
},
currentLanguage: { type: 'string' },
count: {type: 'integer'},
},
},
},
});

//set initial language to dutch
await db.state.insert({
name: "state",
currentLanguage: "dutch",
count: 0,
});

dbHandle.value = db;

//query the single item that's in the table and track it reactively
const state = dbHandle.value.state.findOne();
state.$.subscribe((result) => {
currentState.value = result;
});
console.log("done with mount");
});

//this is what happens when you click the UI button
async function setLang (evt)
{
console.log("clicked");
//find the single item and print its values
const si = await dbHandle.value.state.findOne().exec();
if (si != null)
{
console.log("SINFO: " + si.name + " " + si.currentLanguage + " " + si.count);
console.log(toRaw(si));
}
else
{
console.log("it's null");
}
await si.patch({ currentLanguage: "french" });
}


< /code>
Ich erwartete, dass das Klicken auf die UI-Taste dazu führen würde, dass das einzelne Tupel in der Datenbank seinen Wert von 'Dutch' zu 'Französisch' aktualisiert, und dann würde diese Änderung auf dem Bildschirm erscheinen. Zeigt an, dass es im asynchronen Code entsteht, den ich nicht geschrieben habe: rx-query.ts: 535). < /p>
Voller Anrufstack: < /p>
Uncaught TypeError: proxy must report the same value for the non-writable, non-configurable property '"_meta"'
deepFreeze utils-object.ts:9
deepFreeze utils-object.ts:7
deepFreezeWhenDevMode index.ts:62
rxChangeEventToEventReduceChangeEvent rx-change-event.ts:51
calculateNewResults event-reduce.ts:133
__ensureEqual rx-query.ts:602
_ensureEqualQueue rx-query.ts:535
utils-object.ts:9:44
< /code>
(Mozilla Firefox 136.0.4) < /p>
Aktuelle Pakete, die von Paketen installiert sind.json: < /p>
  "dependencies": {
"@quasar/extras": "^1.16.4",
"pouchdb": "^9.0.0",
"quasar": "^2.16.0",
"rxdb": "^16.12.0",
"rxjs": "^7.8.2",
"vue": "^3.4.18",
"vue-router": "^4.0.0"
},

Ich habe ein generisches Vue/Quasar-Projekt mit "NPM init quasar" erstellt und dies ist meine einzige benutzerschriebene Komponente.