Skip to content

Commit

Permalink
docs: add mastering pinia link
Browse files Browse the repository at this point in the history
  • Loading branch information
posva committed Apr 22, 2024
1 parent 374355f commit 59ec609
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 4 deletions.
2 changes: 1 addition & 1 deletion packages/docs/core-concepts/index.md
Expand Up @@ -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

Expand Down
4 changes: 4 additions & 0 deletions packages/docs/core-concepts/state.md
@@ -1,5 +1,9 @@
# State

<!--
https://masteringpinia.com/lessons/the-3-pillars-of-pinia-state
-->

<VueSchoolLink
href="https://vueschool.io/lessons/access-state-from-a-pinia-store"
title="Learn all about state in Pinia"
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/getting-started.md
Expand Up @@ -64,3 +64,7 @@ A store should contain data that can be accessed throughout your application. Th
On the other hand, you should avoid including in the store local data that could be hosted in a component instead, e.g. the visibility of an element local to a page.

Not all applications need access to a global state, but if yours need one, Pinia will make your life easier.

## When should I **not** use a Store

Sometimes we end up using a store for too many things. If you feel like your application is over using stores, you might want to re consider the purposes of your stores. Namely, if some of their logic should just be composables or if some of their state should be local to a component. This is covered in depth in the [(Not) Overusing stores](https://masteringpinia.com/lessons/not-overusing-stores) lesson of Mastering Pinia.
17 changes: 14 additions & 3 deletions packages/docs/introduction.md
Expand Up @@ -9,18 +9,25 @@ Pinia [started](https://github.com/vuejs/pinia/commit/06aeef54e2cad66696063c6282

## Why should I use Pinia?

<!--
https://masteringpinia.com/lessons/why-use-pinia
-->

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
- Time travel and easier debugging
- 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.

<VueMasteryLogoLink for="pinia-cheat-sheet">
</VueMasteryLogoLink>
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit 59ec609

Please sign in to comment.