Nâng CaoVue.js iconVue.js

Pinia plugins — cách tạo custom plugin và use cases?

Pinia plugins cho phép extend tất cả stores — thêm properties, wrap actions, subscribe to changes:

typescript
import { PiniaPluginContext } from 'pinia'

// Plugin thêm $reset cho tất cả stores (setup stores không có built-in reset)
function resetPlugin({ store, options }: PiniaPluginContext) {
  // Lưu initial state
  const initialState = JSON.parse(JSON.stringify(store.$state))

  store.$reset = () => {
    store.$patch(initialState)
  }
}

// Plugin logging actions
function logPlugin({ store }: PiniaPluginContext) {
  store.$onAction(({ name, args, after, onError }) => {
    console.log(`[Store: ${store.$id}] Action: ${name}`, args)
    after((result) => console.log('Result:', result))
    onError((error) => console.error('Error:', error))
  })
}

// Register plugins
const pinia = createPinia()
pinia.use(resetPlugin)
pinia.use(logPlugin)

// Usage
const store = useCounterStore()
store.$reset()  // Available từ plugin

Use cases: logging, error tracking (Sentry), optimistic updates, undo/redo, sync với localStorage, add $api property.

Xem toàn bộ Vue.js cùng filter theo level & chủ đề con.

Mở danh sách Vue.js