Open code, practice, and notes →
Download source with English comments · for reading
Vue · 19 Restoring Saved Data and Validation
Series contents · Technology map
Stage: Composables and Store Lifetimes · Editable example · Storage ID: vue-step-19
Goals and learning outcomes
- Valid A and B drafts are restored separately.
- New input is retained even with invalid data.
Prerequisites
Unit 19 builds on the work and experiment records from Unit 18.
Key concepts and explanations
Serialization
Store the data structure to save in JSON rather than the reactive Proxy itself. Check the version and fields to read older data safely.
Handling failure
Storage writes can throw exceptions. Retain the in-memory draft and report save failures separately to avoid losing input.
Practice setup
First check the execution scope guidance on the example screen. The following is the preparation environment for extending the assignment in a separate project. Use .vue SFCs and script setup in a separate Vue Vite project. Record package versions and the lockfile, and run on the development server. The built-in Vue examples use the h function and are not a general-purpose SFC compiler.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Create versioned notes JSON read/write functions in src/persistence.js.
- Insert only valid data into the store during initial loading.
- Inject broken JSON and write exceptions, and record on-screen errors and draft preservation results.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Restore input | Valid JSON | Truncated JSON | Report the error and continue editing with an empty store. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Valid A and B drafts are restored separately.
- New input is retained even with invalid data.
Self-check
- What is lost if watch immediate saving runs before the initial restore?
- Is deep watch appropriate for every saving requirement?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
This is an experiment with actual Vue reactivity and render functions. Check SFC templates in an external compilation environment.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Shared Store Scope · Next: Async Components and Loading UI