Reusable logic in pinia store

[MirasMustimov]

Hi! I have pinia store where I have student & parent
Both of them are users

Both students and parents have avatarUrl (have to be computed based on gender) and fullName (computed based on name and surname properties).

Where do I put these getters?

• In pinia? (But that would mean that i have to have two same getters but with different prefixes parentAvatarUrl and studentAvatarUrl)
• In separate helper? (But using it like so getAvatarUrl(parent) feels like helpers know too much)
• Make parent and student to be instances of User class and make the getters to be methods of the class, but googling makes me think that reactivity doesnt work well with class objects. or am I wrong?)

The option that seems cleaner to me is class based.

So my second question is: in js world people seem to use classes less than in PHP. But where do you put methods then? How do you approach having object specific logic, when those objects also have to be reactive?

Any help much appreciated. Thank you!

[posva]

Make parent and student to be instances of User class and make the getters to be methods of the class, but googling makes me think that reactivity doesnt work well with class objects.

You can use classes but you will need to add custom code to handle serialization while regular objects need not.

Another option for you is to return an extended computed of the student and parent that is augmented with the extra properties:

defineStore('...', () => {
  const parent = ref()
  const parentExtended = computed(() => parent.value && ({
    ...parent.value,
    avatarURL: ...,
  }))

  return { _parent: parent, parent: parentExtended }
})

It's important you return the original state in one way or another so pinia can recognize it as state.

[AlxBDo]

To address the problem of extending or composing Pinia setup stores for reusable getters, setters, and actions, you can utilize the epps package available on npm. This package provides a convenient way to manage and extend your Pinia stores, allowing you to create reusable components that can be easily integrated into multiple stores.

Here's how you can achieve this using epps:

1. Install the epps package:

First, you need to install the epps package via npm. You can do this by running the following command in your project directory:

npm install epps

2. Create a Base Store:
   Define your base store with the necessary state, getters, and actions. For example:

import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
export const useBaseStore = defineStore('base-store', () => {
const name = ref('');
const age = ref(1);
const ageString = computed(() => ${name.value} is aged ${age.value});

function doubleAge() {   
age.value *= 2;     

}

return { name, age, ageString, doubleAge };   

});

3. Extend the Base Store Using epps:

Use the epps package to extend the base store and create new stores that reuse the base store's functionality. Here's an example:

import { defineStore } from 'pinia';
import { useBaseStore } from './baseStore'; // Import your base store
import epps from 'epps'; export

const usePersonStore = defineStore('person-store', () => {
const base = useBaseStore();

function tripleAge() {
    base.age.value *= 3;     
}     

return { ...base, tripleAge };   

});

export const useOtherStore = defineStore('other-store', () => {
function sayHello() {
console.log('Hello');
}

return { ...useBaseStore(),bsayHello }; 

});

By using the epps package, you can easily manage and extend your Pinia stores, promoting code reuse and maintaining a clean and organized codebase. This approach allows you to compose stores with shared functionality, making your application more modular and easier to maintain.

For more information, you can check out the epps package on npm: epps on npm.