From 59ec60908d8b2183d742329344dcfff05643b610 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 22 Apr 2024 22:01:55 +0200 Subject: [PATCH] docs: add mastering pinia link --- packages/docs/core-concepts/index.md | 2 +- packages/docs/core-concepts/state.md | 4 ++++ packages/docs/getting-started.md | 4 ++++ packages/docs/introduction.md | 17 ++++++++++++++--- 4 files changed, 23 insertions(+), 4 deletions(-) diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md index 01d458ccb9..4bbe1f9ff1 100644 --- a/packages/docs/core-concepts/index.md +++ b/packages/docs/core-concepts/index.md @@ -98,7 +98,7 @@ Do not return properties like `route` or `appProvided` (from the example above) ## What syntax should I pick? -As with [Vue's Composition API and Options API](https://vuejs.org/guide/introduction.html#which-to-choose), pick the one that you feel the most comfortable with. If you're not sure, try [Option Stores](#option-stores) first. +As with [Vue's Composition API and Options API](https://vuejs.org/guide/introduction.html#which-to-choose), pick the one that you feel the most comfortable with. Both have their strengths and weaknesses. Options stores are easier to work with while Setup stores are more flexible and powerful. If you want to dive deeper into the differences, check the [Option Stores vs Setup Stores chapter](https://masteringpinia.com/lessons/when-to-choose-one-syntax-over-the-other) in Mastering Pinia. ## Using the store diff --git a/packages/docs/core-concepts/state.md b/packages/docs/core-concepts/state.md index 413557e9bc..3ce0538dc6 100644 --- a/packages/docs/core-concepts/state.md +++ b/packages/docs/core-concepts/state.md @@ -1,5 +1,9 @@ # State + + + Pinia is a store library for Vue, it allows you to share a state across components/pages. If you are familiar with the Composition API, you might be thinking you can already share a global state with a simple `export const state = reactive({})`. This is true for single page applications but **exposes your application to [security vulnerabilities](https://vuejs.org/guide/scaling-up/ssr.html#cross-request-state-pollution)** if it is server side rendered. But even in small single page applications, you get a lot from using Pinia: +- Testing utilities +- Plugins: extend Pinia features with plugins +- Proper TypeScript support or **autocompletion** for JS users +- Server Side Rendering Support - Devtools support - A timeline to track actions, mutations - Stores appear in components where they are used @@ -18,9 +26,8 @@ Pinia is a store library for Vue, it allows you to share a state across componen - Hot module replacement - Modify your stores without reloading your page - Keep any existing state while developing -- Plugins: extend Pinia features with plugins -- Proper TypeScript support or **autocompletion** for JS users -- Server Side Rendering Support + +If you still have doubts, check out [the **official** Mastering Pinia course](https://masteringpinia.com). In the begining we cover how to build our own `defineStore()` function and then we move to the official Pinia API. @@ -124,6 +131,10 @@ export default defineComponent({ You will find more information about each _map helper_ in the core concepts. +## Official Course + +The official course for Pinia is [Mastering Pinia](https://masteringpinia.com). Written by Pinia's author, it covers everything from the basics to advanced topics like plugins, testing, and server-side rendering. It is the best way to get started with Pinia and to master it. + ## Why _Pinia_ Pinia (pronounced `/piːnjʌ/`, like "peenya" in English) is the closest word to _piña_ (_pineapple_ in Spanish) that is a valid package name. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It's also a delicious tropical fruit indigenous to South America.