Competence grid for part 7

Use this grid to judge whether you are ready for the exam and the project. Read each row and solve the check task next to it without looking anything up. If it feels easy, you have reached the goal. If not, the link in the last column takes you to the right place.

I can …	Check task	Look it up
tell the kinds of state apart	Assign the search text, an open dialog, the login and the catalog to a kind of state each.	State in the right place
lift state into the parent	Show the same favorites in two siblings without either of them keeping a copy.	State in the right place
put shared state into a module	Hand out a list from a module so that other files can only read it.	State in the right place
explain when an app needs no store	Explain why an open dialog needs no store.	State in the right place
write a setup store with Pinia	Write a store for the favorites with state, a getter and an action.	Pinia
take a store apart without losing the connection	Explain why const { count } = store stays put, and fix it.	Pinia
use a store in a guard	Let a guard check the login from the store.	Pinia
test stores	Test a store with a fresh Pinia for every test.	Pinia
load data in an action and show every state	Load the catalog in an action and show loading, error and the list.	Data from an API
send data as JSON and evaluate the answers	Send a request with POST and show the messages for 422 and 409.	Data from an API
abort a request	Abort the loading when someone leaves the page before it is done.	Data from an API
set the address of an API and explain CORS	Explain why the app needs no CORS with the Vite proxy.	Data from an API
keep values in the browser's storage	Keep the favorites in localStorage and a draft in sessionStorage.	Persistence
keep several tabs in step	Let a store listen to the storage event.	Persistence
explain what never belongs in the browser's storage	Explain why a login belongs in a cookie with HttpOnly.	Persistence
ask about a login after a reload	Explain why the guard waits for the course API after a reload.	Persistence
load data with a server state library (deep dive)	Load the catalog with useQuery and explain what the key is for.	Server state libraries

With part 7, the material of the exam is complete. For the project and for part 8 you mainly need components, the router, stores and data from an API. The last row belongs to the deep dive and is optional.

The app after part 7

What Martina Hostettler's assignments in this part added up to is in the course repo in the folder case/07-state/en. Pinia keeps the catalog, the login, the favorites and the requests in stores, and the data come from the course API. Members sign in at the API, stay signed in for one session and see their requests in the header and on the page "My requests". The team records returns at the API, the favorites are the same in every tab, and a request someone started stays in its tab. The tests in the folder tests check the wishes from this part.

npm install
npm test

For the app, start the course API in one terminal, in the folder api of the course repo, and Vite in a second one.

npm start
npm run dev

If you didn't finish everything in part 7, start part 8 from this state.