javascript / intermediate
Snippet
Unveränderlicher Status mit readonly()
Die Funktion readonly() nimmt ein reaktives oder einfaches Objekt entgegen und gibt einen schreibgeschützten Proxy des Originals zurück. Dies ist nützlich, um einen Status freizugeben, der nur durch eine bestimmte interne Logik geändert werden darf, und verhindert so versehentliche Änderungen durch konsumierende Komponenten.
snippet.js
1
2
3
4
5
6
7
8
9
import { reactive, readonly } from 'vue';const state = reactive({ count: 0 });const lockedState = readonly(state);// This will trigger a warning and fail in development// lockedState.count++;const increment = () => state.count++;
vue
Erklärung
1
const lockedState = readonly(state);
Erstellt einen tiefgreifenden schreibgeschützten Proxy des reaktiven Statusobjekts.
2
lockedState.count++;
Jeder Versuch, den gesperrten Status zu ändern, führt zu einer Warnung in der Konsole.