pinia plugin for defaults

[expliArturSmolen]

Good day to all,

I am in the process of setting up a store and have some features I would like to use across all stores. After some research I wrote a pinia plugin which works great.

I am currently wondering if this is even the right way to go and if there is anything I may have overlooked. I would also like to say that I am in the middle of the process and the code is not yet mature.

DefaultStore (This is what i want to have in every Store. )

import { PiniaPluginContext } from 'pinia'
import { ref } from 'vue';
import { User } from '../models/user.model';
import HttpService from '../services/BaseHttpService';


export function piniaDefaultPlugin(context: PiniaPluginContext) {
    const httpService = new HttpService('/' + context.store.$id);
    const collection = ref<any[]>([])
    const current = ref<any>()

    function create() {
        httpService.post(current.value).then(response => {
            collection.value = [...collection.value, response.data]
        });
    }

    function update() {
        httpService.put(current.value.id, current.value).then(response => {
            const index = collection.value.findIndex((user: User) => user.id === current.value.id);
            collection.value[index >= 0 ? index : collection.value.length] = response.data
        });
    }

    function fetch(id: any) {
        httpService.get(id).then(response => {
            const index = collection.value.findIndex((user: User) => user.id === response.data.id);
            current.value = response.data
            collection.value[index >= 0 ? index : collection.value.length] = response.data
        });
    }

    function fetchAll() {
        httpService.getAll().then(response => {
            collection.value = response.data['hydra:member']
        });
    }

    return {current, collection, create, update, fetch, fetchAll}
}

UserStore

import { defineStore } from 'pinia'
import HttpService from '../services/BaseHttpService';
import { computed, ComputedRef, ref } from 'vue'
import { User } from '../models/user.model';

export const useUserStore = defineStore('users', () => {
    const authedUser = ref(new User())

    function login(data: { email: string, password: string }) {
        const http = new HttpService('/login');
        return http.post(data).then((response) => {
            authedUser.value = response.data
        })
    }

    function authorize() {
        const isAuthed = Array.isArray(authedUser.value?.roles) && authedUser.value?.roles.includes('ROLE_USER');
        if (!isAuthed) {
            const http = new HttpService('/current');
            http.getAll().then((response) => {
                authedUser.value = response.data
            })
        }
    }

    function hasRole(role: string) {
        return Array.isArray(authedUser.value?.roles) && authedUser.value?.roles.includes(role);
    }

    const authed: ComputedRef<boolean> = computed((): boolean => {
        return Array.isArray(authedUser.value?.roles) && authedUser.value?.roles.includes('ROLE_USER');
    });

    return {authedUser, authed, login, authorize, hasRole}
})

pinia.d.ts

import 'pinia'
import { Ref } from 'vue';

declare module 'pinia' {
  export interface PiniaCustomStateProperties {
    collection: Ref<any[]>
    current: Ref<any>

    create: () => void
    update: () => void
    fetch: (id: any) => void
    fetchAll: () => void
  }
}