vue-shared-store

The most easy way to define a shared store composition api for vue3.

Install

npm i vue-shared-store

Usage

// a.ts

import { defineStore } from 'vue-shared-store';
import { computed } from 'vue';

export const useStore = defineStore(
    {
        a: 1,
    },
    (state) => {
        const b = computed(() => state.value.a + 1);

        const inc = () => state.value.a ++;

        return { b, inc };
    },
);

In the previous code, we define a shared state which is an object contains a a property. The defineStore function return a composition api function which will be used in different components which use the shared state, and when the shared state is modified in one component, the other components which use this shared state will react the mutation.

// b.vue
<script setup>
import { useStore } from './a';
const { b } = useStore();
</script>

<template>
    <span>{{b}}</span>
</template>

In this component, we use the exposed composition api function to use value b.

// c.vue
<script setup>
import { useStore } from './a';
const { inc } = useStore();
</script>

<template>
    <button @click="inc">inc</button>
</template>

In this component, we invoke the the inc function to modify the shared state, however the state is shared thus the preivous component which use value b will change too.

API

defineStore(data, setup?, options?)

• data: shared data state
• setup?: define the composition api function, recieve shared state wrapped by a ref, if not pass, the composition api function return the shared state directly
• options?
  • name?: to indentify current observer's name
  • plugins?: array
  • shallow?: whether use shallowRef

isStoreActive(): boolean;

When we define a shared state, we can use isStoreActive inside setup function to know whether the setup function has been executed before.

This is useful when we want to fetch data from remote backend only once when components are mounted in shared store setup function. For example:

const useStore = defineStore(null, (state) => {
    // you should invoke it at the top scope of setup function
    const isActive = isStoreActive();

    onMounted(() => {
        if (!isActive) {
            fetchData();
        }
    });

    return state;
});

// component a
const state = useStore();
// fetchData will be executed

// component b
const state = useStore();
// fetchData will not be executed

Notice: you should invoke it at the top scope of setup function, and it is implemented based on effectScope, so you should NOT invoke setupCount in another effectScope.

Plugin

A plugin is a function which using composition api.

Plugin: (state, options, data) => void

createSharedStoreMutationObserver(options): Plugin

Create a shared store mutation observer plugin. Can only be used in debug mode to trace code source line. options:

• debug: boolean, true to console the debugger message
• onChange: (info) => void

Example:

const useStore = defineStore(
    { a: { b: [1, 2, 3] } },
    (state) => {
        const b = computed(() => state.value.a.b[2] + 1);

        const inc = () => state.value.a.b[2]++;

        return { b, inc };
    },
    {
        plugins: [
            createSharedStoreMutationObserver({
                debug: process.env.NODE_ENV === 'development',
                onChange({ time, newValue, keyPath }) {
                    record(time, keyPath, newValue);
                },
            }),
        ],
    },
);