Adding simple state management
For our simple application, we can replace a lot of the boilerplate code if we use the reactive() API to build a simple store:
- Let’s start by building a new file,
store.js, that uses areactiveobject for our profile values:import { reactive } from 'vue'; export const store = reactive({ name:'', occupation:'' });
This very simple object will be very powerful due to the use of Vue 3’s reactivity support. Any component making use of the values from here will be able to rely on knowing that when a value changes, it will instantly be reflected. Right away, we can see how this simplifies things as we switch to the store.
- In
AppProfileForm, let’s import the store first:<script setup> import { store } from '@/store.js'; </script> - Next, update both fields to point to the store instead of local data. In the following code, the
v-modelvalue...