A more useful plugin API

[samzlab]

To be able to persist/dump stores, watch/log changes, etc

[samzlab]

Plugins was not explained in the video, so outside of the provide function so the hooks will be different in Vuex 5

Helpers:

These functions can be imported from the library.

getStoreState(storeInstance) => {[key: string]: Proxy|Ref}: returns all of the watchable Proxy or Ref objects in the store instance

getStoreActions(storeInstance) => {[key: string]: Function}: returns all the callable function on the store instance.

getCurrentStoreInstance() => storeInstance: returns the currently initializing store instance. Only works during the store initialization.

Provide

Plugins can provide utility function to be exposed in the storeContext. These functions are passed during the store initialization:

// api-plugin.js
export default (provide) => {
    provide('api', (uri) => fetch(`https://localhost:5000/${uri}`));
}

// app.js
import apiPlugin from './api-plugin.js';
const vueStore = createVueStore({
    plugins: [ apiPlugin ]
});

// my-store.js
export default defineStore(('my-store', ({ api }) => {
    // setup logic
    return {};
}));

Hooks

The usable hooks are passed in the second argument of the plugin.

export default function myPlugin(provide, hooks) => { /* plugin code */};

Arguments passed to the callback functions:

• The storeInstance contains the exact object which is returned from the initializer function passed to defineStore().
• The context contains all the provided functions by plugins.

onUse(callback: (storeName, storeInstance, context) => void)

Called every time a store is being accessed by the useStore() or composed via use().

Example:

// my-store-logger.js
export default function logger(provide, { onUse }) {
    onUse((name, instance, context) => {
        console.log(`Used: "${name}"`);
    });
}

onInitialized(callback: (storeName, storeInstance, context) => void)

Called once per store per app after the first time usage of useStore() or composed via use()

// my-store-logger.js
export default function logger(provide, { onInitialized }) {
    onInitialized((name, instance, context) => {
        console.log(`[Initialized] Store name: "${name}"`);
    });
}

onAction(callback: (storeName, storeInstance, actionName, context) => void)

Called after a store function invoked.

// my-store-logger.js
export default function logger(provide, { onAction }) {
    onAction((name, instance, action, context) => {
        console.log(`[Action invoked] Store action: "${name}.${action}"`);
    });
}

onMutated(callback: (storeName, storeInstance, stateKey, oldValue, context) => void)

Called when any watchable store property mutated (the value changed).

// my-store-logger.js
export default function logger(provide, { onMutated }) {
    onMutated((name, instance, key, newValue, oldValue, context) => {
        const oldJSON = JSON.encode(oldValue);
        const newJSON = JSON.encode(newValue);
        console.log(`[State mutated] "${name}.${key}" is being mutated from ${oldJSON} to ${newJSON}`);
    });
}