This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Pinia is already a familiar face in my articles, and my projects have all migrated to Pinia. The main reason is simple and easy to use, the source code is easy to understand.

Take a look at its documentation if you don’t: put links to some of the sections

  • Pinia website
  • # How to write a Pinia Plugin to enhance the power of the Store
  • A Pinia Plugin implements local caching of data
  • # Pinia (Vex5.0?) Source code analysis

The above review

Review the use of the Pinia plugin

const pinia = createPinia()
// give the plugin to pinia
pinia.use(SecretPiniaPlugin)
Copy the code

Create the plugin

function testPlugin(ctx) {
    // do something
    return {...}
}
Copy the code

typescript

If you’ve seen the above article or documentation, you can write a Pinia plug-in in javascript.

However, Pinia’s original intention is to integrate typescript better, so we need to pay attention to the following points when writing TS Plugin

Typing plugins

import { PiniaPluginContext } from 'pinia'

export function myPiniaPlugin(context: PiniaPluginContext) {
  // ...
}
Copy the code

For better type derivation and constraints, Pinia exports a canonical Pinia context, and we need to define the first parameter of the plug-in.

Typing new store properties

import 'pinia'

declare module 'pinia' {
  export interface PiniaCustomProperties {
    // by using a setter we can allow both strings and refs
    set hello(value: string | Ref<string>)
    get hello(): string

    // you can define simpler values too
    simpleNumber: number
  }
}
Copy the code

When we add custom attributes to Pinia’s store, we need to add types to Pinia’s type document (.d.ts) at the same time to facilitate pinia’s derivation and intelligent hints.

pinia.use(({ store }) => {
  store.hello = 'Hola'
  store.hello = ref('Hola')

  store.number = Math.random()
  // @ts-expect-error: we haven't typed this correctly
  store.number = ref(Math.random())
})
Copy the code

So you can safely and easily write object attributes, the ability to advance constraints on errors

Typing new creation options

When we need to create new options for Pinia’s store

import { defineStore } from 'pinia' // useStore could be anything like useUser, useCart // the first argument is a unique id of the store across your application export const useStore = defineStore('main', { // other options... // add option})Copy the code

When we create a store using defineStore(), we should extend DefineStoreOptionsBase, which, unlike PiniaCustomProperties, exposes only two generics: The State and Store types allow us to limit what can be defined.

import 'pinia' declare module 'pinia' { export interface DefineStoreOptionsBase<S, Store> { // allow defining a number of ms for any of the actions debounce? : Partial<Record<keyof StoreActions<Store>, number>> } }Copy the code

conclusion

This should summarize all the considerations of the Pinia plugin, but if anything is missing, check out the official documentation for details.

Maybe you can try pinia with your own hands.