format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
This commit is contained in:
@@ -10,18 +10,18 @@ Plugins extend all stores with custom properties, methods, or behavior.
|
||||
## Basic Plugin
|
||||
|
||||
```ts
|
||||
import { createPinia } from 'pinia'
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
function SecretPiniaPlugin() {
|
||||
return { secret: 'the cake is a lie' }
|
||||
return { secret: 'the cake is a lie' };
|
||||
}
|
||||
|
||||
const pinia = createPinia()
|
||||
pinia.use(SecretPiniaPlugin)
|
||||
const pinia = createPinia();
|
||||
pinia.use(SecretPiniaPlugin);
|
||||
|
||||
// In any store
|
||||
const store = useStore()
|
||||
store.secret // 'the cake is a lie'
|
||||
const store = useStore();
|
||||
store.secret; // 'the cake is a lie'
|
||||
```
|
||||
|
||||
## Plugin Context
|
||||
@@ -29,13 +29,13 @@ store.secret // 'the cake is a lie'
|
||||
Plugins receive a context object:
|
||||
|
||||
```ts
|
||||
import { PiniaPluginContext } from 'pinia'
|
||||
import { PiniaPluginContext } from 'pinia';
|
||||
|
||||
export function myPiniaPlugin(context: PiniaPluginContext) {
|
||||
context.pinia // pinia instance
|
||||
context.app // Vue app instance
|
||||
context.store // store being augmented
|
||||
context.options // store definition options
|
||||
context.pinia; // pinia instance
|
||||
context.app; // Vue app instance
|
||||
context.store; // store being augmented
|
||||
context.options; // store definition options
|
||||
}
|
||||
```
|
||||
|
||||
@@ -44,19 +44,19 @@ export function myPiniaPlugin(context: PiniaPluginContext) {
|
||||
Return an object to add properties (tracked in devtools):
|
||||
|
||||
```ts
|
||||
pinia.use(() => ({ hello: 'world' }))
|
||||
pinia.use(() => ({ hello: 'world' }));
|
||||
```
|
||||
|
||||
Or set directly on store:
|
||||
|
||||
```ts
|
||||
pinia.use(({ store }) => {
|
||||
store.hello = 'world'
|
||||
store.hello = 'world';
|
||||
// For devtools visibility in dev mode
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
store._customProperties.add('hello')
|
||||
store._customProperties.add('hello');
|
||||
}
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## Adding State
|
||||
@@ -64,15 +64,15 @@ pinia.use(({ store }) => {
|
||||
Add to both `store` and `store.$state` for SSR/devtools:
|
||||
|
||||
```ts
|
||||
import { toRef, ref } from 'vue'
|
||||
import { toRef, ref } from 'vue';
|
||||
|
||||
pinia.use(({ store }) => {
|
||||
if (!store.$state.hasOwnProperty('hasError')) {
|
||||
const hasError = ref(false)
|
||||
store.$state.hasError = hasError
|
||||
const hasError = ref(false);
|
||||
store.$state.hasError = hasError;
|
||||
}
|
||||
store.hasError = toRef(store.$state, 'hasError')
|
||||
})
|
||||
store.hasError = toRef(store.$state, 'hasError');
|
||||
});
|
||||
```
|
||||
|
||||
## Adding External Properties
|
||||
@@ -80,12 +80,12 @@ pinia.use(({ store }) => {
|
||||
Wrap non-reactive objects with `markRaw()`:
|
||||
|
||||
```ts
|
||||
import { markRaw } from 'vue'
|
||||
import { router } from './router'
|
||||
import { markRaw } from 'vue';
|
||||
import { router } from './router';
|
||||
|
||||
pinia.use(({ store }) => {
|
||||
store.router = markRaw(router)
|
||||
})
|
||||
store.router = markRaw(router);
|
||||
});
|
||||
```
|
||||
|
||||
## Custom Store Options
|
||||
@@ -96,24 +96,26 @@ Define custom options consumed by plugins:
|
||||
// Store definition
|
||||
defineStore('search', {
|
||||
actions: {
|
||||
searchContacts() { /* ... */ },
|
||||
searchContacts() {
|
||||
/* ... */
|
||||
},
|
||||
},
|
||||
debounce: {
|
||||
searchContacts: 300,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
// Plugin reads custom option
|
||||
import debounce from 'lodash/debounce'
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
pinia.use(({ options, store }) => {
|
||||
if (options.debounce) {
|
||||
return Object.keys(options.debounce).reduce((acc, action) => {
|
||||
acc[action] = debounce(store[action], options.debounce[action])
|
||||
return acc
|
||||
}, {})
|
||||
acc[action] = debounce(store[action], options.debounce[action]);
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
For Setup Stores, pass options as third argument:
|
||||
@@ -121,11 +123,13 @@ For Setup Stores, pass options as third argument:
|
||||
```ts
|
||||
defineStore(
|
||||
'search',
|
||||
() => { /* ... */ },
|
||||
() => {
|
||||
/* ... */
|
||||
},
|
||||
{
|
||||
debounce: { searchContacts: 300 },
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
## TypeScript Augmentation
|
||||
@@ -133,13 +137,13 @@ defineStore(
|
||||
### Custom Properties
|
||||
|
||||
```ts
|
||||
import 'pinia'
|
||||
import type { Router } from 'vue-router'
|
||||
import 'pinia';
|
||||
import type { Router } from 'vue-router';
|
||||
|
||||
declare module 'pinia' {
|
||||
export interface PiniaCustomProperties {
|
||||
router: Router
|
||||
hello: string
|
||||
router: Router;
|
||||
hello: string;
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -149,7 +153,7 @@ declare module 'pinia' {
|
||||
```ts
|
||||
declare module 'pinia' {
|
||||
export interface PiniaCustomStateProperties<S> {
|
||||
hasError: boolean
|
||||
hasError: boolean;
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -159,7 +163,7 @@ declare module 'pinia' {
|
||||
```ts
|
||||
declare module 'pinia' {
|
||||
export interface DefineStoreOptionsBase<S, Store> {
|
||||
debounce?: Partial<Record<keyof StoreActions<Store>, number>>
|
||||
debounce?: Partial<Record<keyof StoreActions<Store>, number>>;
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -170,11 +174,11 @@ declare module 'pinia' {
|
||||
pinia.use(({ store }) => {
|
||||
store.$subscribe(() => {
|
||||
// React to state changes
|
||||
})
|
||||
});
|
||||
store.$onAction(() => {
|
||||
// React to actions
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Nuxt Plugin
|
||||
@@ -183,18 +187,18 @@ Create a Nuxt plugin to add Pinia plugins:
|
||||
|
||||
```ts
|
||||
// plugins/myPiniaPlugin.ts
|
||||
import { PiniaPluginContext } from 'pinia'
|
||||
import { PiniaPluginContext } from 'pinia';
|
||||
|
||||
function MyPiniaPlugin({ store }: PiniaPluginContext) {
|
||||
store.$subscribe((mutation) => {
|
||||
console.log(`[🍍 ${mutation.storeId}]: ${mutation.type}`)
|
||||
})
|
||||
return { creationTime: new Date() }
|
||||
console.log(`[🍍 ${mutation.storeId}]: ${mutation.type}`);
|
||||
});
|
||||
return { creationTime: new Date() };
|
||||
}
|
||||
|
||||
export default defineNuxtPlugin(({ $pinia }) => {
|
||||
$pinia.use(MyPiniaPlugin)
|
||||
})
|
||||
$pinia.use(MyPiniaPlugin);
|
||||
});
|
||||
```
|
||||
|
||||
<!--
|
||||
|
||||
Reference in New Issue
Block a user