Extending stores

[jeffrey-hiraki]

I was wondering whether it is possible to extend a store. Our scenario.

I have an X number of stores, which all share an Y number of options and actions. They also share a few items in the state.

[posva]

You would use setup stores + Composables

export function useCommonStore() {
  const data = ref()

  function action() {}
  const getter = computed(() => data.value * 2)

  return { data, action, getter }
})

export const useStore = defineStore('id', () => {
  const { data, action, getter } = useCommonStore()

  return { data, action, getter }
})

Here is the Composable approach

[ciabaros]

Can you elaborate on how this extends another store definition? (which was my understanding of what the OP was asking).

[iampedropiedade]

Here's how I did it, not 100% sure if it's the best way but it works for me:

The base store that needs to be extended:

// file stores/base.js

export const baseStore = {
    state: () => ({
        stateA: ...,
        stateB: ...,
    }),
    getters: {
        getter1: ...,
        getter2: ...,
    },
    actions: {
        actionX() {
            ...
        },
        actionY() {
            ...
        },
    }
}

An example store that extends the base store:

// file stores/users.js

import {entityStore} from "./base";
import {defineStore} from "pinia";

export const useUsersStore = defineStore('users', {
        state: () => ({
            ...baseStore.state(),
            stateC: ...
        }),
        getters: {
            ...baseStore.getters,
            getter3: ...,
        },
        actions: {
            ...baseStore.actions,
            actionZ() {
                ...
            }
        },
})