--- /dev/null
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const translations = {
+ 'en-US':
+ 'Master this and much more with the official video course by the author of Pinia',
+ 'zh-CN': '通过 Pinia 作者的官方视频课程掌握更多内容',
+}
+defineProps<{ href: string; title: string }>()
+</script>
+
+<template>
+ <div class="mp">
+ <a
+ :href="href"
+ target="_blank"
+ rel="noopener"
+ :title="title"
+ class="no-icon"
+ >
+ <div class="text">
+ <slot>{{ translations[site.lang] }}</slot>
+ </div>
+ </a>
+ </div>
+</template>
+
+<style scoped>
+.mp {
+ margin-top: 20px;
+ background-color: var(--vp-code-block-bg);
+ padding: 1em 1.25em;
+ border-radius: 2px;
+ position: relative;
+ border-radius: 1em;
+ border: 2px solid var(--vp-c-bg-alt);
+ transition: border-color 0.5s;
+}
+.mp:hover {
+ border: 2px solid var(--vp-c-brand-1);
+}
+
+.mp a {
+ color: var(--c-text);
+ position: relative;
+ display: flex;
+ gap: 1em;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ justify-content: space-between;
+ padding-left: 36px;
+}
+.mp a .content {
+ flex-grow: 1;
+}
+.mp a:before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 30px;
+ height: 30px;
+ top: calc(50% - 15px);
+ left: -4px;
+ border-radius: 50%;
+ background-color: var(--vp-c-brand-1);
+}
+html.dark .mp a:after {
+ --play-icon-color: #000;
+}
+.mp a:after {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ top: calc(50% - 5px);
+ left: 8px;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 9px solid var(--play-icon-color, #fff);
+}
+</style>
import './styles/playground-links.css'
import VueSchoolLink from './components/VueSchoolLink.vue'
import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
+import MasteringPiniaLink from './components/MasteringPiniaLink.vue'
// import VuejsdeConfBanner from './components/VuejsdeConfBanner.vue'
import status from '../translation-status.json'
enhanceApp({ app }) {
app.component('VueSchoolLink', VueSchoolLink)
app.component('VueMasteryLogoLink', VueMasteryLogoLink)
+ app.component('MasteringPiniaLink', MasteringPiniaLink)
},
}
# Actions
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/synchronous-and-asynchronous-actions-in-pinia"
title="Learn all about actions in Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/the-3-pillars-of-pinia-actions"
+ title="Learn all about actions in Pinia"
/>
Actions are the equivalent of [methods](https://vuejs.org/api/options-state.html#methods) in components. They can be defined with the `actions` property in `defineStore()` and **they are perfect to define business logic**:
# Getters
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/getters-in-pinia"
title="Learn all about getters in Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/the-3-pillars-of-pinia-getters"
+ title="Learn all about getters in Pinia"
/>
Getters are exactly the equivalent of [computed values](https://vuejs.org/guide/essentials/computed.html) for the state of a Store. They can be defined with the `getters` property in `defineStore()`. They receive the `state` as the first parameter **to encourage** the usage of arrow function:
# Defining a Store
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/define-your-first-pinia-store"
title="Learn how to define and use stores in Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/quick-start-with-pinia"
+ title="Get started with Pinia"
/>
Before diving into core concepts, we need to know that a store is defined using `defineStore()` and that it requires a **unique** name, passed as the first argument:
# Using a store outside of a component
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/how-does-usestore-work"
+ title="Using stores outside of components"
+/>
+
Pinia stores rely on the `pinia` instance to share the same store instance across all calls. Most of the time, this works out of the box by just calling your `useStore()` function. For example, in `setup()`, you don't need to do anything else. But things are a bit different outside of a component.
Behind the scenes, `useStore()` _injects_ the `pinia` instance you gave to your `app`. This means that if the `pinia` instance cannot be automatically injected, you have to manually provide it to the `useStore()` function.
You can solve this differently depending on the kind of application you are writing.
# Plugins
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/What-is-a-pinia-plugin"
+ title="Learn all about Pinia plugins"
+/>
+
Pinia stores can be fully extended thanks to a low level API. Here is a list of things you can do:
- Add new properties to stores
# State
-<!--
-https://masteringpinia.com/lessons/the-3-pillars-of-pinia-state
- -->
-
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/access-state-from-a-pinia-store"
title="Learn all about state in Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/the-3-pillars-of-pinia-state"
+ title="Learn all about state in Pinia"
/>
The state is, most of the time, the central part of your store. People often start by defining the state that represents their app. In Pinia the state is defined as a function that returns the initial state. This allows Pinia to work in both Server and Client Side.
# Introduction
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/introduction-to-pinia"
title="Get started with Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
+ title="Create your own Pinia from scratch"
/>
Pinia [started](https://github.com/vuejs/pinia/commit/06aeef54e2cad66696063c62829dac74e15fd19e) as an experiment to redesign what a Store for Vue could look like with the [Composition API](https://github.com/vuejs/composition-api) around November 2019. Since then, the initial principles have remained the same, but Pinia works for both Vue 2 and Vue 3 **and doesn't require you to use the composition API**. The API is the same for both except for _installation_ and _SSR_, and these docs are targeted to Vue 3 **with notes about Vue 2** whenever necessary so it can be read by Vue 2 and Vue 3 users!
# Server Side Rendering (SSR)
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/ssr-friendly-state"
+ title="Learn about SSR best practices"
+/>
+
:::tip
If you are using **Nuxt.js,** you need to read [**these instructions**](./nuxt.md) instead.
:::
# Nuxt.js
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/ssr-friendly-state"
+ title="Learn about SSR best practices"
+/>
+
Using Pinia with [Nuxt](https://nuxt.com/) is easier since Nuxt takes care of a lot of things when it comes to _server side rendering_. For instance, **you don't need to care about serialization nor XSS attacks**. Pinia supports Nuxt Bridge and Nuxt 3. For bare Nuxt 2 support, [see below](#nuxt-2-without-bridge).
## Installation
# Action %{#actions}%
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/synchronous-and-asynchronous-actions-in-pinia"
title="Learn all about actions in Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/the-3-pillars-of-pinia-actions"
+ title="Learn all about actions in Pinia"
/>
Action 相当于组件中的 [method](https://v3.vuejs.org/guide/data-methods.html#methods)。它们可以通过 `defineStore()` 中的 `actions` 属性来定义，**并且它们也是定义业务逻辑的完美选择。**
# Getter %{#getters}%
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/getters-in-pinia"
title="Learn all about getters in Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/the-3-pillars-of-pinia-getters"
+ title="Learn all about getters in Pinia"
/>
Getter 完全等同于 store 的 state 的[计算值](https://cn.vuejs.org/guide/essentials/computed.html)。可以通过 `defineStore()` 中的 `getters` 属性来定义它们。**推荐**使用箭头函数，并且它将接收 `state` 作为第一个参数：
# 定义 Store %{#defining-a-store}%
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/define-your-first-pinia-store"
title="Learn how to define and use stores in Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/quick-start-with-pinia"
+ title="Get started with Pinia"
/>
在深入研究核心概念之前，我们得知道 Store 是用 `defineStore()` 定义的，它的第一个参数要求是一个**独一无二的**名字：
# 在组件外使用 store %{#using-a-store-outside-of-a-component}%
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/how-does-usestore-work"
+ title="Using stores outside of components"
+/>
+
Pinia store 依靠 `pinia` 实例在所有调用中共享同一个 store 实例。大多数时候，只需调用你定义的 `useStore()` 函数，完全开箱即用。例如，在 `setup()` 中，你不需要再做任何事情。但在组件之外，情况就有点不同了。
实际上，`useStore()` 给你的 `app` 自动注入了 `pinia` 实例。这意味着，如果 `pinia` 实例不能自动注入，你必须手动提供给 `useStore()` 函数。
你可以根据不同的应用，以不同的方式解决这个问题。
# 插件 %{#plugins}%
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/What-is-a-pinia-plugin"
+ title="Learn all about Pinia plugins"
+/>
+
由于有了底层 API 的支持，Pinia store 现在完全支持扩展。以下是你可以扩展的内容：
- 为 store 添加新的属性
# State %{#state}%
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/access-state-from-a-pinia-store"
title="Learn all about state in Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/the-3-pillars-of-pinia-state"
+ title="Learn all about state in Pinia"
/>
在大多数情况下，state 都是你的 store 的核心。人们通常会先定义能代表他们 APP 的 state。在 Pinia 中，state 被定义为一个返回初始状态的函数。这使得 Pinia 可以同时支持服务端和客户端。
# 简介 %{#introduction}%
-<VueSchoolLink
+<!-- <VueSchoolLink
href="https://vueschool.io/lessons/introduction-to-pinia"
title="Get started with Pinia"
+/> -->
+
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
+ title="Create your own Pinia from scratch"
/>
Pinia [起始](https://github.com/vuejs/pinia/commit/06aeef54e2cad66696063c62829dac74e15fd19e)于 2019 年 11 月左右的一次实验，其目的是设计一个拥有[组合式 API](https://github.com/vuejs/composition-api) 的 Vue 状态管理库。从那时起，我们就倾向于同时支持 Vue 2 和 Vue 3，并且不强制要求开发者使用组合式 API，我们的初心至今没有改变。除了**安装**和 **SSR** 两章之外，其余章节中提到的 API 均支持 Vue 2 和 Vue 3。虽然本文档主要是面向 Vue 3 的用户，但在必要时会标注出 Vue 2 的内容，因此 Vue 2 和 Vue 3 的用户都可以阅读本文档。
# 服务端渲染 (SSR) %{#server-side-rendering-ssr}%
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/ssr-friendly-state"
+ title="Learn about SSR best practices"
+/>
+
:::tip
如果你使用的是 **Nuxt.js**，你需要阅读的是[**这些说明文档**](./nuxt.md)。
:::
# Nuxt.js %{#nuxt-js}%
+<MasteringPiniaLink
+ href="https://masteringpinia.com/lessons/ssr-friendly-state"
+ title="Learn about SSR best practices"
+/>
+
搭配 [Nuxt](https://nuxt.com/) 的 Pinia 更易用，因为 Nuxt 处理了很多与**服务器端渲染**有关的事情。例如，**你不需要关心序列化或 XSS 攻击**。Pinia 既支持 Nuxt Bridge 和 Nuxt 3，也支持纯 Nuxt 2，[见下文](#nuxt-2-without-bridge)。
## 安装 %{#installation}%
projects / thirdparty / vuejs / pinia.git / commitdiff
