From 99e2ed5ec53d1427f93d161f7026842b64b38721 Mon Sep 17 00:00:00 2001 From: cx33 Date: Tue, 11 Oct 2022 04:51:04 +0800 Subject: [PATCH] docs(nuxt): pinia plugins usage (#1581) [skip ci] --- packages/docs/core-concepts/plugins.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/docs/core-concepts/plugins.md b/packages/docs/core-concepts/plugins.md index bd63afd9..9513eb16 100644 --- a/packages/docs/core-concepts/plugins.md +++ b/packages/docs/core-concepts/plugins.md @@ -365,6 +365,29 @@ There is also a `StoreGetters` type to extract the _getters_ from a Store type. When [using pinia alongside Nuxt](../ssr/nuxt.md), you will have to create a [Nuxt plugin](https://nuxtjs.org/docs/2.x/directory-structure/plugins) first. This will give you access to the `pinia` instance: +```ts +// plugins/myPiniaPlugin.js +import { PiniaPluginContext } from 'pinia' + +function MyPiniaPlugin({ store }: PiniaPluginContext) { + store.$subscribe((mutation) => { + // react to store changes + console.log(`[🍍 ${mutation.storeId}]: ${mutation.type}.`) + }) + + // Note this has to be typed if you are using TS + return { creationTime: new Date() } +} + +export default defineNuxtPlugin(({ $pinia }) => { + $pinia.use(MyPiniaPlugin) +}) +``` + +Note the above example is using TypeScript, you have to remove the type annotations `PiniaPluginContext` and `Plugin` as well as their imports if you are using a `.js` file. + +### Nuxt.js 2 + ```ts // plugins/myPiniaPlugin.js import { PiniaPluginContext } from 'pinia' @@ -386,5 +409,3 @@ const myPlugin: Plugin = ({ $pinia }) => { export default myPlugin ``` - -Note the above example is using TypeScript, you have to remove the type annotations `PiniaPluginContext` and `Plugin` as well as their imports if you are using a `.js` file. -- 2.47.2